File: /home/salhiscp/salhab360photos.com/wp-content/themes/acora/sass/style-dark.scss
/**
* Front CSS.
*
* @package acora
* @since acora 1.0
*/
/*
-------------------------------------------------------------------------------
WARNING!
If you are willing to update this theme, do not edit this file.
To make any changes please use the theme Custom CSS section.
-------------------------------------------------------------------------------
TABLE OF CONTENTS
1. MISCELLANEOUS
2. LAYOUT
2.1 Main rules.
2.2 Header.
2.3 Footer.
3. CONTENT
3.1 Blog archive.
3.2 Share buttons.
3.3 Link post format.
3.4 Video and Audio post formats.
3.5 Quote post format and global quote format.
3.6 Video and audio player.
3.7 Single post / page.
3.8 Gutenberg support.
4. MENU
5. SIDEBAR
6. CONTACT US PAGE
7. ABOUT US PAGE
8. HOME SLIDER
8. PORTFOLIO
9. PLUGINS
10. WIDGETS
11. NAVIGATION
12. COMMENTS
13. COMPONENTS
14. SHORTCODES
15. NO RESULTS PAGE
16. SCREEN READER
*/
/**
* Import at top
* --------------------------------------------------------------------------------
*/
@import 'base/_variables'; //variables
@import 'base/_mixins'; //mixins
/**
* --------------------------------------------------------------------------------
* 1. MISCELLANEOUS
* --------------------------------------------------------------------------------
*/
.clear{
clear: both;
}
.acora-16-9,
.acora-16-4{
position:relative;
width:100%;
}
.video-background{
background: $images-background-color-dark;
display:block;
}
.fwd-hide-opacity{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1);
}
.fwd-reveal-opacity{
opacity:1;
transition:opacity .5s cubic-bezier(.7,0,.2,1);
}
.acora-hide-up{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1),transform .5s cubic-bezier(.7,0,.2,1);
@include transform(translateY(-50px));
}
.comments-hide,
.acora-hide,
.insta-hide,
.fwd-hide{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1),transform .5s cubic-bezier(.7,0,.2,1);
@include transform(translateY(50px));
}
.acora-hide-left{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1),transform .5s cubic-bezier(.7,0,.2,1);
@include transform(translateX(-50px));
}
.acora-hide-top{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1),top .5s cubic-bezier(.7,0,.2,1);
top:50px;
}
.acora-button-hide{
opacity:0;
transition:opacity .5s cubic-bezier(.7,0,.2,1),transform .5s cubic-bezier(.7,0,.2,1);
@include transform(translateY(50px));
}
.reveal{
opacity:1;
@include transform(translateY(0));
}
.reveal-left{
opacity:1;
@include transform(translateX(0));
}
.reveal-top{
opacity:1;
top:0;
}
.text-center{
text-align:center;
}
.copy-link{
font-family: $body-font;
z-index: 9999999999;
white-space: nowrap;
font-size:12px;
padding:8px 10px !important;
background:#FFF;
color:#000;
}
.copy-link-selected{
font-family: $body-font;
z-index: 9999999999;
font-size:12px;
padding:8px 10px !important;
background:#000;
color:#FFF;
}
.clear-fix{
clear: both;
}
.overflow-visible{
overflow: visible !important;
}
p:empty {
display:none;
}
textarea{
resize: none;
}
/**
* Alignment
*/
.table{ display:table; width:100%; height:100%; position:absolute;
.table-cell{ display:table-cell; width:100%; height:100%; vertical-align:middle;}
}
.table-fwds-button {
display: table; width:100%; height:100%; position:absolute;
}
.table-cell-fwds-button {
display: table-cell; width:100%; height: 100%; vertical-align: middle; text-align:center;
}
.alignleft{
display:inline;
float:left;
margin-right:1.5em;
margin-bottom:1em;
}
.alignright{
display:inline;
float:right;
margin-left:1.5em;
margin-bottom:1em;
}
.aligncenter{
clear:both;
display:block;
margin:0 auto;
margin-bottom:1em;
}
/**
* --------------------------------------------------------------------------------
* 2. LAYOUT
* --------------------------------------------------------------------------------
*/
/**
* 2.1 Main rules
* ------------------------------------------------------
**/
html{
overflow-x: hidden !important;
height: auto;
margin: 0;
& > .image-background{
background-color: $bk-dark-images !important;
}
}
body{
overflow: visible;
font-family: $body-font;
letter-spacing: 0.03em;
line-height: 1.5;
background: #111113;
color: #FFF;
&.error404{
height: 100%;
}
// Fixing margins when wpadmin bar is active.
&.admin-bar{
.acora_portfolio_igp_archive,
.portolio-archive{
top:32px;
}
.vertical-menu--enabled .vertical-menu-toggle,
.portolio-archive .p-selector,
.portolio-archive .p-wrapper{
top: 62px;
}
.page_only_shortcode_fullscreen{
&:not(.password){
top:32px;
height: calc(100vh - 32px);
}
}
.page-not-found{
height: 100vh;
}
.vm-logo{
top: 62px !important;
}
}
}
h1,h2,h3,h4,h5,h6{
font-family: $header-font;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 20px 0 29px 0;
}
h1{
font-size:44px;
margin: -3px 0 24px -3px;
}
h2{
font-size:33px;
margin: -3px 0 31px -2px;
}
h3{
font-size:24px;
margin: -3px 0 25px -1px;
}
h4{
font-size:18px;
margin: -1px 0 24px;
& + p{
margin-top: -13px;
}
}
h5{
font-size:16px;
margin: 0 0 21px 0;
}
h6{
font-size:14px;
margin: 0 0 16px 0;
}
p + p{
margin-top: -10px !important;
}
a{
text-decoration: none;
background-image: linear-gradient(#FFF calc(100% - 1px), #FFF 1px);
background-position: 0 calc(100% + 1px);
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size .6s cubic-bezier(.215,.61,.355, 1), color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
&:hover{
background-size: 100% 1px;
color: #FFF;
}
}
.protected-post-form{
margin-top: -3px;
label{
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
margin: 90px 0 4px 0;
&:after{
position: relative;
content: '*';
top: 1px;
color: #F00;
}
}
input[type="submit"]{
box-sizing: border-box;
font: 700 14px $body-font;
display: inline-block;
letter-spacing: 0.03em;
text-transform: uppercase;
border: none !important;
padding: 16px 38px 16px !important;
transform: translate(10px, 1px);
background: $main-color;
color: #FFF !important;
@include animate-hover(background, 250ms);
&:hover{
background: #000;
}
}
@-moz-document url-prefix() {
input[type="submit"]{
margin: -1px;
}
}
}
input[type="password"]{
box-sizing: border-box;
display: inline-block;
border: 1px solid $lines-color-dark !important;
font-size: 14px;
letter-spacing: 0.03em;
margin-right: 10px;
padding: 14px 20px;
background-color: $input-background-color-dark;
color: #FFF !important;
&:hover{
border-color: $lines-color-dark;
}
}
/**
* 2.2 Header
* ------------------------------------------------------
**/
.menu{
position:absolute;
}
.header-anim{
overflow:hidden;
}
.acora-main-header{
position:relative;
overflow:hidden;
text-align:center;
.header-content{
position:absolute;
pointer-events: none;
left: 50%;
transform: translateX(-50%);
bottom: 64px;
}
.site-name{
margin: 0 20px 21px;
color: #FFF;
}
.site-description{
display: block;
font: normal 18px $header-font;
margin: 0 20px 25px;
color: #FFF;
}
.fwdsisc-next-and-prev-button{
color:#000 !important;
background:#FFF ;
font-size:18px !important;
display:block !important;
padding:16px 20px !important;
z-index:2;
}
.fwdsisc-next-and-prev-button-selected{
color:#FFF !important;
background:#000;
font-size:18px !important;
display:block !important;
padding:16px 20px !important;
z-index:2;
}
}
/**
* 2.3 Footer
* ------------------------------------------------------
**/
.footer{
position: absolute;
width: 100%;
font-size: 12px;
bottom: 0;
.wrapper{
text-align: center;
min-height: 18px !important;
padding: 21px 0 22px !important;
background: #010511;
}
span{
color: #FFF;
}
}
/**
* --------------------------------------------------------------------------------
* 3. CONTENT
* --------------------------------------------------------------------------------
*/
/**
* 3.1 Blog, page and portfiolio single posts.
* ------------------------------------------------------
**/
.blog-main,
.page-main,
.portfolio-main,
.home-extended{
position: relative;
overflow: hidden;
width: 100%;
.wrapper{
min-height: calc(100vh - 160px);
padding-bottom: 160px;
}
&.password{
article{
padding-bottom:0;
}
}
}
.blog-main{
.featured-image{
border: 1px solid #111113 !important;
left: -1px;
top: -1px;
.image-background{
background-color: $bk-dark-images !important;
}
}
.fwdevp{
background-color: $bk-dark-images !important;
}
&.single{
margin: auto;
.format-quote,
.format-link{
.entry-content .featured-image{
.background{
background: #2C2C2C !important;
}
& > .background{
background: rgba(0,0,0,.4) !important;
}
}
}
.posts{
display: block;
max-width: 1380px;
margin: 0 auto;
}
// Featured image.
.entry-content .featured-image .background{
background-color: #1A1A1A !important;
}
}
.blog-content{
max-width: 1380px;
margin: auto;
.inner{
overflow: visible;
margin:0 20px;
h1{
margin-left: 1px;
}
}
}
.wrapper{
&.no-sidebar{
margin-right: 0;
.entry-content{
.title{
font-size: 64px
}
}
}
}
.posts{
display:inline-block;
width: 100%;
&.yes-sidebar{
float:left;
width: calc(100% - 320px);
box-sizing: border-box;
border-right: 1px solid rgba(141, 141, 141, 0);
padding-right: 40px;
@include animate-motion(border, .6s);
}
}
.reveal-border{
border-right: 1px solid $lines-color-dark !important;
}
.spacer{
position: absolute;
width:100%;
height:98px;
background: #111113;
}
.entry{
border-top: 1px solid $lines-color-dark;
margin-top: 112px;
&:first-child{
border-top: none;
margin-top: 0;
}
&.sticky{
.title{
position: relative;
padding-right: 60px;
&:after{
content:'\e911';
font: 16px 'fwdicon';
position: absolute;
margin-top: 2px;
top: 99px;
right: 0;
padding: 8px;
background: $main-color;
color: #000;
}
}
}
}
.entry-content{
.title{
font: 700 44px $header-font;
text-transform: uppercase;
letter-spacing: 0.02em;
overflow-wrap: break-word;
padding:99px 0 0;
margin-bottom: 27px;
&.no-content{
overflow: hidden;
}
a{
position: relative;
line-height: 1.1;
color: #FFF;
border: none;
&:hover{
color: $main-color;
}
}
& + .entry-excerpt{
margin-top: -10px;
}
}
.entry-excerpt{
font-size: 14px;
line-height: 1.8;
margin: 30px 0 0 0;
}
}
.posts .no-sidebar{
.title{
font-size: 64px !important;
}
}
.read-more{
margin-top: 66px;
.button{
position: relative;
overflow: visible;
font: 700 14px $body-font;
text-transform: uppercase;
border: none;
background-position: 0 100%;
left: 80px;
color: #FFF;
&:before{
content:'\e904';
font: 60px 'fwdicon';
position:absolute;
top: -20px;
left: -80px;
margin-right: 20px;
}
@-moz-document url-prefix(){
&:before{
top: -24px;
}
}
&:hover{
color: $main-color;
&:before{
transition: color 0.3s ease-out !important;
color: $main-color;
}
}
}
}
// Instagram feed.
.instagram{
margin-top: 15px;
.info-holder{
position: relative;
z-index: 1;
display: inline-block;
top: 18px;
left: 50%;
transform: translateX(-50%);
border-radius: 21px;
padding: 6px 31px;
background: $images-background-color-dark;
}
.fwdicon-instagram{
font-size: 16px;
color: #FFF;
}
.text{
position: relative;
top: -2px;
font-size: 12px;
padding-left: 6px;
color: #FFF;
}
#insta_holder{
position: relative;
background: $input-background-color-dark;
}
.PGThumbnailOverlay{
background:#000;
}
.fwdicon-link{
font-size: 26px !important;
backface-visibility: hidden;
color: #FFF;
}
}
}
.portfolio-button-mobile{
position:relative !important;
clear: both;
top: auto !important;
transform: none !important;
display: none !important;
}
.add-porfolio-button-transition{
transition:background-color .32s ease-out, color .32s, transform .6s cubic-bezier(.7,0,.2,1) !important;
}
/*#portfolioSISC_evp_div{
left: -1px !important;
padding-right: 10px !important;
box-sizing: border-box;
}*/
/**
* 3.2 Share buttons.
* ------------------------------------------------------
**/
.FWDSButtonNormalState{
position:absolute;
font-size:14px;
width:30px;
height:29px;
cursor: pointer;
//background:#FFF;
color: #999;
.fwdicon-pinterest{
&:before{
position: relative;
left: -1px;
}
}
}
.FWDSButtonNormalStateTop{
//background:#FFF;
}
.FWDSButtonSelectedState{
position:absolute;
font-size:14px;
width:30px;
height:29px;
cursor: pointer;
color:$main-color;
.fwdicon-pinterest{
&:before{
position: relative;
left: -1px;
}
}
}
.table-fwds-button {
display: table; width:100%; height:100%; position:absolute;
}
.table-cell-fwds-button {
display: table-cell; width:100%; height: 100%; vertical-align: middle; text-align:center;
}
// Page not found.
.page-not-found{
position:relative;
height: 100vh;
top: 0;
left: 0;
background:transparent !important;
.content{
position:absolute;
transform-origin: 0;
width: 456px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
h1{
display: inline-block;
font-size: 260px;
font-weight: normal !important;
margin-top: -5px;
}
.ghost{
display: block;
font-size: 160px;
margin-top: -74px;
}
.back{
margin-top: -6px !important;
}
a{
display: inline-block;
position: relative;
line-height: 1 !important;
font: 900 44px $body-font;
text-transform: uppercase;
margin: 30px 0 40px 0;
border-bottom: 1px solid rgba(255, 255, 255, .2);
color: #FFF;
&:hover{
color: $main-color;
}
}
}
@media screen and (max-height: 650px){
.page-not-found{
.content{
transform: translateX(-40%) translateY(-50%) scale(.8);
}
}
}
@media screen and (max-height: 520px){
.page-not-found{
.content{
transform: translateX(-25.5%) translateY(-50%) scale(.5);
}
}
}
/**
* 3.3 Link post format.
* ------------------------------------------------------
**/
.acora-format-link{
.link-holder{
position: relative;
text-align:center;
border: 1px solid $lines-color-dark;
.link-title{
position:absolute;
transform-origin: 0 0;
white-space: nowrap;
letter-spacing: 1px;
font-weight:700;
font-size:140px !important;
margin:0 !important;
left:0;
top:0;
color:#FFF;
}
a{
position:relative;
font-size: 22px;
z-index:1;
}
}
.entry-content{
.fwdicon{
position: relative;
font-size: 23px;
top: 4px;
margin: 0 10px 0 20px;
color: #000;
}
.link{
position:relative;
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
margin: 0 20px 0 0;
color:#FFF;
&:hover,
&:focus{
color: #FFF;
}
}
}
.featured-image{
position: relative;
width: 100%;
height: 100%;
.background{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.4);
}
.fwdicon{
color: #FFF !important;
}
.table{
top: 0;
.link{
color: #FFF;
border-color: rgba(255, 255, 255, 0.6);
background-image: linear-gradient(transparent calc(100% - 1px), #FFF 1px);
}
}
}
}
/**
* 3.4 Video and Audio post formats.
* ------------------------------------------------------
**/
/* Subtitle */
.EVPSubtitle{
font: 600 22px Roboto, Arial !important;
text-align:center !important;
color:#FFFFFF !important;
max-width: none !important;
text-shadow: 0px 0px 1px #000000 !important;
line-height:28px !important;
margin:0 20px 20px !important;
padding: 0px !important;
}
.fwdsisc .EVPSubtitle.phone,
.fwdigp .EVPSubtitle.phone{
font-size: 14px !important;
line-height: 18px !important;
margin: 0 10px 10px !important;
}
.fwdsisc .EVPSubtitle.large,
.fwdigp .EVPSubtitle.large{
font-size: 28px !important;
line-height: 38px !important;
margin: 0 20px 20px !important;
}
.acora-format-video{
}
.acora-format-audio{
.audio{
margin: 20px 0 0;
.fwdevp{
height: 47px !important;
}
}
}
/**
* 3.5 Quote post format and global quote format.
* ------------------------------------------------------
**/
// Archive and global quote.
.acora-format-quote{
.featured-image{
position: relative;
margin: 0 !important;
.background{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.4);
}
& > div{
position: absolute !important;
top: auto !important;
}
.wp-block-quote{
margin: 0;
p{
&:before{
content: '\e969';
}
}
p, p:before{
color: #FFF;
}
cite{
color: #FFF;
}
}
}
blockquote,
.wp-block-quote{
margin: 0;
p{
color: #FFF;
}
}
}
// Quote format on single post / page.
.blog-main .single{
.featured-image{
.wp-block-quote{
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
p, p:before{
color: #FFF;
}
cite{
color: #FFF;
}
}
}
}
/**
* 3.6 Video and audio player.
* ------------------------------------------------------
**/
.EVPMainButtonsNormalState{
font-size: 20px !important;
color:#888 !important;
letter-spacing: normal;
.fwdicon-fullscreen{
font-size: 19px;
}
}
.EVPMainButtonsSelectedState{
font-size: 20px !important;
color:#FFF !important;
letter-spacing: normal;
.fwdicon-fullscreen{
font-size: 19px;
}
}
.fwdevp{
overflow: visible !important;
.fwdicon{
font-family: 'fwdicon';
&:before{
position: relative;
}
}
.fwdicon-download:before{
top: -1px;
}
}
.EVPLargePlayButtonNormalState{
position:absolute;
font-size:30px;
width:76px;
height:59px;
cursor: pointer;
background: rgba(26, 26, 26, .8);
color:#888;
}
.EVPLargePlayButtonSelectedState{
position:absolute;
font-size:30px;
width:76px;
height:59px;
cursor: pointer;
background: $button-hover-color;
color:#FFF;
}
.EVPLargePlayButtonSelectedState .table-cell-fwdevp-button{
//padding:2px 0 0;
}
.EVPCloseButtonNormalState{
position:absolute;
font-size:16px;
width:40px;
height:39px;
cursor: pointer;
background:#1f1f1f;
color:#FFF;
}
.EVPCloseButtonSelectedState{
position:absolute;
font-size:16px;
width:40px;
height:39px;
cursor: pointer;
background:#1f1f1f;
color:#F00;
}
.EVPSocialMediaButtonsNormalState{
font-size:18px !important;
color:#888 !important;
font-weight:100;
}
.EVPSocialMediaButtonsSelectedState{
font-size:18px !important;
color:#FFF !important;
}
.table-fwdevp-button {
display: table; width:100%; height:100%; position:absolute;
}
.table-cell-fwdevp-button {
display: table-cell; width:100%; height: 100%; vertical-align: middle; text-align:center;
}
/**
* 3.7 Single post / page.
* ------------------------------------------------------
**/
.page-main{
&.single{
max-width: none;
}
.posts{
max-width: 1380px;
margin: 0 auto;
}
.entry-footer{
&.no-meta{
//display: none;
}
}
}
.posts,
.page-main{
max-width: none;
.single{
.entry-header,
.entry-content{
background: transparent;
height:auto;
.title{
font: 700 64px $header-font;
line-height: 1;
overflow: hidden;
overflow-wrap: break-word;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 18px 12px 17px;
padding-top: 99px;
color:#FFF;
}
}
.meta{
margin: 0 20px 0 13px;
.entry-date{
font-size: 14px;
&.posted-on{
position: relative;
display: inline-block;
line-height: 1.8;
font-style: italic;
font-weight: normal;
z-index: 3;
padding: 5px 6px 0 30px;
margin: 0 15px 0 0;
color:#999;
&:before{
position:absolute;
font-style: normal;
content:'\e91a';
font:16px 'fwdicon';
top:10px;
left:8px;
color:#FFF;
}
span{
color:#FFF;
}
}
&.comments{
position:relative;
display:inline-block;
line-height: 1.8;
z-index:1;
padding: 5px 6px 0 30px;
margin:0 8px 0 0;
&:before{
position:absolute;
content:'\e932';
font:16px 'fwdicon';
top:11px;
left:8px;
color:#FFF;
}
a{
color: #999;
&:hover{
color:$main-color;
};
}
}
&.posted-by,
&.categories{
position:relative;
display:inline-block;
line-height: 1.8;
z-index:2;
padding: 5px 6px 0 30px;
margin: 0 8px 0 0;
&:before{
position:absolute;
content:'\e923';
font:16px 'fwdicon';
top: 10px;
left:8px;
color:#FFF;
}
a{
font-weight:700;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: #999;
&:hover{
color:$main-color;
};
}
}
&.categories{
&:before{
content:'\e910';
}
a{
font-weight: normal;
}
}
}
}
.entry-content{
.title{
margin-left:-7px;
}
line-height: 1.8;
}
.like-button{
position:relative;
display:inline-block;
line-height: 1.8;
top: 2px;
font-size:14px;
box-shadow: none;
padding: 5px 6px 0 28px;
margin: 0 8px 0 0;
background: transparent;
}
.fwdicon-love{
position:absolute;
cursor: pointer;
transform-origin: 50%;
z-index:1;
font-size: 18px;
top:1px;
left:8px;
color: $main-color;
}
.like-result{
position:relative;
top:-2px;
padding-left: 3px;
}
.entry-footer{
overflow: hidden;
border-top: 1px solid $lines-color-dark;
border-bottom: 1px solid $lines-color-dark;
margin: 56px 20px 0 20px;
padding: 12px 0 5px 0;
&.no-display{
display: none;
}
&.has-cm-rl,
&.only-can-edit{
display: block !important;
border-bottom: none;
padding: 0;
}
&.no-meta{
display: none;
}
&.has-navigation{
border-top: none;
margin-top: 39px;
}
}
.tags-container{
display: inline-block;
font-size:15px;
margin-bottom: 12px;
span{
display:inline-block;
font-weight: 700;
font-size: 14px;
margin-right:10px;
background: none;
}
a{
color:#999;
margin-left: 5px;
background-image: none;
&:hover{
color:#FFF;
};
}
}
.share-header{
position:absolute;
left:-5000px;
}
.main-share-buttons-container{
float:right;
padding-right: 3px;
.label{
position: relative;
top: -10px;
font-size: 14px;
font-weight: 700;
margin:0 12px 0 6px;
}
.fwdicon:before{
top: 0;
}
}
.share-buttons-container{
position: relative;
display:inline-block;
width:auto;
height:29px;
.fwdicon{
font-size: 16px;
}
}
.gallery,
.fwdigp-grid{
margin: 0 0 30px 0;
}
.read-more{
display:none;
}
// Featured image.
.featured-image{
position:relative;
margin-bottom: 30px;
background: #1A1A1A ;
.background{
background: #2B2B2B !important;
}
.image-background{
background: transparent !important;
}
& > .background{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.4) !important;
}
a{
font-size:22px;
}
}
}
.entry-content{
// Links
a{
border-bottom: 1px solid rgba(255,255,255, .2);
color:#DDD;
&:hover{
color:#FFF;
background-size: 100% 1px;
}
}
.button-light{
&.button-large,
&.button-normal{
margin-top: 8px !important;
}
}
// First quote.
.first-quote{
margin-top:40px;
}
// Link post format.
.link-format{
position:relative;
text-align: center;
border: 1px solid $lines-color-dark;
.fwdicon{
position: relative;
font-size: 23px;
top: 4px;
margin: 0 10px 0 20px;
color: #FFF;
}
.featured-image{
position: relative;
margin: 0;
.fwdicon{
color: #FFF;
}
}
a{
font-size: 18px;
font-weight: 700;
margin-right: 20px;
}
.table.has-featured-image{
position: absolute;
top: 0;
a{
color: #FFF;
border-color: rgba(255,255,255, .6);
background-image: linear-gradient(transparent calc(100% - 1px), #FFF 1px);
}
}
}
}
// Shortcode buttons.
p{
.button-light{
&:hover{
background: $button-hover-color-dark !important;
color: #000 !important;
}
}
}
.button-light + .button-light{
margin: 0 0 0 10px;
margin-left: 10px;
}
.button-normal,
.button-large{
font-size: 14px;
letter-spacing: .15em;
border: none !important;
padding: 11px 27px 12px 31px !important;
}
.button-large{
padding: 15px 39px 16px !important;
}
#comments{
margin-top: 0;
border: none;
}
.related-posts ~ #comments,
.single.no-meta ~ #comments{
margin-top: 99px;
border-top: 1px solid $lines-color-dark;
}
.comment-navigation + #respond,
.commentlist + #respond{
margin-top: 96px;
padding-top: 80px;
border-top: 1px solid $lines-color-dark;
}
.entry-navigation:not(.portfolio){
&.has-cm-rl{
border-bottom: 1px solid $lines-color-dark;
padding-bottom: 40px;
}
& + #comments{
margin-top: 0 !important;
border: none !important;
}
&.protected{
border: none;
border-top: 1px solid $lines-color-dark;
margin-top: 55px;
padding-top: 40px;
}
&.protected-no-admin{
display: none;
}
&.no-navigation{
display: none;
}
}
}
/**
* 3.8 Gutenberg support.
* ------------------------------------------------------
**/
.posts{
.single{
.entry-content,
.comment-content{
overflow:visible;
font-size:14px;
margin: 54px 20px 0 20px;
& > *:last-child{
margin-bottom: 0 !important;
}
pre,
code{
& + p{
margin-top: -10px !important;
}
}
hr{
margin-bottom: 40px;
background: $lines-color-dark;
& + p{
margin-top: -10px;
}
}
// Heading.
h1, h2, h3, h4, h5, h6{
margin: 0 0 19px -2px;
padding-top: 10px;
& + p,
& + ol,
& + ul{
margin-top: -10px !important;
}
& + .wp-block-pullquote{
margin-top: -13px;
&.alignright,
&.alignleft{
margin-top: -11px;
}
}
+ dl{
margin-top: -10px;
}
& + .wp-block-columns{
margin-top: -10px;
}
& + p{
.button-light{
margin: 10px 10px 10px 0;
}
}
}
h1{
margin-top: 46px;
margin-bottom: 25px;
}
h2, h3{
margin-top: 47px;
margin-bottom: 29px;
}
h3{
margin-bottom: 32px;
}
h4{
margin-left: 0;
margin-top: 49px;
margin-bottom: 34px;
}
h5, h6{
margin-left: 0;
margin-top: 50px;
margin-bottom: 34px;
}
h1 + h2{
margin-top: -7px;
}
h2 + h3{
margin-top: -10px;
}
h3 + h4{
margin-top: -11px;
}
h4 + h5{
margin-top: -13px;
}
h5 + h6{
margin-top: -16px;
}
// DL, (wired block!)
dl{
margin: 0;
dd{
margin-bottom: 23px;
}
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 3px;
}
}
cite{
font-family: $header-font;
font-style: normal;
position: relative;
font-size: 13px;
margin-left: 5px;
strong{
font-weight: normal;
}
}
& > figure{
clear:both;
padding: 0;
}
// Paragraph.
p{
margin: 0 0 33px 0;
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 3px;
}
& > img{
&.alignleft{
margin-right: 30px;
}
&.alignright{
margin: 0 0 0 30px;
}
&.size-full,
&.aligncenter{
padding-bottom: 7px;
}
&.alignleft,
&.alignright{
clear: both;
margin-bottom: 0;
padding-bottom: 14px;
}
&.alignnone,
&.aligncenter{
padding-top: 10px;
}
}
& + figure.wp-caption{
&.alignleft{
margin-right: 30px;
}
&.alignright{
margin-left: 30px;
}
&.aligncenter{
margin: 5px auto 35px;
}
&:not(.alignleft):not(.alignright){
figcaption{
margin-bottom: -12px;
}
}
}
& + .wp-block-pullquote{
margin-top: -13px;
&.alignright,
&.alignleft{
margin-top: -10px;
}
}
&.has-background{
padding:20px;
}
& + .wp-block-columns{
margin-top: -10px;
}
&.has-medium-font-size,
&.has-large-font-size,
&[style*="font-size:46px"]{
line-height: 1.4;
}
&.has-background{
margin-bottom: 30px;
}
& + address{
margin-top: -9px;
}
& + .wp-block-button{
&.aligncenter{
margin-top: 0;
}
&.alignright,
&.alignleft{
margin-top: 0;
}
}
& + .wp-block-file{
margin-top: -3px;
}
& + .wp-block-archives,
& + .wp-block-categories,
& + .wp-block-latest-posts{
margin-top: 0;
}
& + .wp-block-gallery{
margin-top: 0 !important;
}
& + .wp-block-separator{
margin-top: 53px;
}
& + .wp-block-verse{
margin-top: -8px;
}
& + ol,
& + ul{
margin-top: -10px !important;
&.wp-block-latest-comments.has-avatars{
margin-top: -2px !important;
& + p{
margin-top: -12px;
}
}
}
& > code{
margin: 33px 0 30px;
}
}
// Files.
.wp-block-file{
margin: 36px 0;
& + .wp-block-file{
margin-top: -6px;
}
& + p{
margin-top: -13px;
}
a:nth-child(2){
font: 700 14px $header-font;
text-transform:uppercase;
display:inline-block;
border: none;
border-radius: 0;
margin-left: 20px;
padding: 16px 27px 12px 31px;
background: $main-color;
color: #FFF;
&:hover{
background:#000 !important;
color:#FFF !important;
}
}
}
// Media and text.
.wp-block-media-text{
margin-bottom: 40px !important;
& + .wp-block-media-text{
margin-top: 33px;
}
.wp-block-media-text__content{
padding:0 30px 20px;
}
& + p{
margin-top: -10px !important;
}
p{
font-size: 14px;
margin: 0 0 20px 0 !important;
&.has-large-font-size{
font-size: 30px !important;
}
& + p{
margin-top: -10px !important;
}
&:last-child{
margin-bottom: 0 !important
}
}
}
// Pullquote.
blockquote.wp-block-pullquote{
border: none;
padding: 0 0 0 29px;
margin: -2px 27px 37px 0;
p{
margin-right: 40px;
}
}
.wp-block-pullquote{
position: relative;
overflow: visible !important;
border: none;
margin: 0;
padding: 0;
blockquote,
&.is-style-solid-color{
border: none !important;
padding: 0 0 0 29px !important;
margin: 0;
p{
margin-right: 40px;
}
}
& + p{
margin-top: 25px;
}
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 7px;
}
&.is-style-solid-color{
margin: 0;
padding: 14px 0 19px 22px !important;
}
&.alignleft{
max-width: 450px;
blockquote{
border: none;
margin: -2px 20px 5px -4px;
p{
margin-right: 0;
}
}
}
&.alignright{
max-width: 450px;
blockquote{
border: none;
margin: -2px 0 5px 10px;
p{
margin-right: 0;
}
}
}
&.alignwide,
&.alignfull{
margin-bottom: 37px;
blockquote{
margin: -2px 20px 27px 20px;
}
}
p{
font-size: 18px !important;
font-style: italic;
font-weight: 700;
text-align: left;
margin: 0 !important;
padding: 0 0 0 9px;
&:before{
font-family: 'fwdicon';
position: absolute;
font-style: normal;
font-weight: 100;
content: '\e969';
font-size: 26px;
left: 5px;
top: -2px;
color:$main-color;
}
}
cite{
font: normal 13px $header-font;
position: relative;
display: block;
text-align: left;
text-transform: unset;
margin: 0 !important;
padding: 9px 9px 0;
//margin: -19px 0 0 6px;
}
& + .wp-block-table{
margin-top: 40px;
}
}
// Simple slider gallery.
.fwdsisc + ul{
margin-top: 30px;
}
// Post formats.
.video-holder,
.link-format,
.audio{
margin-bottom: 26px;
& + h2,
& + h3{
margin-top: 57px;
}
}
.audio{
overflow: visible;
.fwdevp{
height: 47px !important;
}
}
// Lists.
ul,ol{
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 3px;
}
&:not(.wp-block-gallery){
margin: 0 30px 21px 20px;
}
& > *:last-child{
margin-bottom: 0 !important;
}
& + .wp-block-gallery:not(.alignleft){
margin-top: 33px !important;
}
& + .wp-block-separator{
margin-top: 53px;
}
}
ul ul,
ul ol,
ol ol,
ol ul{
margin: 7px 7px 7px 20px;
}
ul li{
list-style: disc;
}
li{
&:not(.blocks-gallery-item){
margin: 23px 0;
}
}
li ol,
li ul{
margin-bottom:0 !important;
margin-left: 30px !important;
}
ul ul li,
ol ol li{
margin-left: 0 !important;
}
li code{
margin: 33px 0 30px;
}
// Table
table{
& + h2,
& + h3{
margin-top: 57px;
}
}
.video-background{
margin-bottom: 40px;
}
&.protected{
margin-top: 37px;
}
// Embed blocks.
.wp-block-embed{
margin-bottom: 30px;
padding: 0;
figcaption{
text-align: center;
margin: 16px 20px -5px;
}
}
.minimalDarkThumbnailTitle,
.minimalDarkThumbnailDesc{
color: #FFF;
}
// Button
.wp-block-button{
display: block;
margin: 0 0 40px 0;
text-align: center;
& + span{
padding-top: 25px;
display: block;
}
& + p{
margin-top: -10px !important;
}
& + .wp-block-code{
margin-top: -7px;
}
&.alignleft{
display: inline-block;
margin: 0 20px 0 0;
& + p{
margin-top: -4px !important;
}
}
&.alignright{
display: inline-block;
margin: 0;
& + p{
margin-top: -4px !important;
}
}
&.aligncenter{
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
&.alignleft + .alignleft{
margin:0 0 0 20px;
}
&.alignright + .alignright{
margin:0 20px 0 0;
}
.wp-block-button__link{
font-weight: 700;
border: none;
letter-spacing: .15em;
border-radius: 50px;
padding: 11px 27px 12px 31px !important;
&:hover{
background: $button-hover-color-dark !important;
color: #000 !important;
}
}
&.is-style-squared .wp-block-button__link{
border-radius: 0;
}
.wp-block-button__link:not(.has-background){
background:$main-color;
}
.wp-block-button__link:not(.has-text-color){
color:#FFF;
}
&.is-style-outline{
.wp-block-button__link{
background: transparent;
border-radius: 28px;
border: 1px solid $main-color;
color: #FFF;
}
}
}
// Image.
.wp-block-image{
position: relative;
line-height: 0;
box-sizing: border-box;
margin: 0 0 40px 0;
padding: 0 !important;
& + p{
margin-top: -10px !important;
// This class is added in front.js.
&.p-fix{
margin-top: -13px !important;
}
}
& + .wp-block-separator{
margin-top: 60px;
}
&.size-large,
&.is-resized{
& + p{
margin-top: -10px !important;
}
}
.wp-element-caption{
font-family: $body-font;
line-height: 1.8 !important;
font-weight: normal !important;
font-size: 14px !important;
margin-top: 20px;
color: $caption-dark;
}
figure{
position: relative;
& > a{
border: none;
}
&.aligncenter{
.wp-element-caption{
}
}
.figcaption{
margin-top: 10px;
}
}
&:not(.alignfull):not(.alignwide){
margin: 0 0 40px 0;
}
.alignright{
margin: 0 0 8px 15px;
}
.alignleft{
margin: 0 15px 8px 0;
figcaption{
bottom: 7px;
}
}
&.alignfull{
figcaption{
left: 4px;
}
}
&.alignwide,
&.alignfull{
figcaption{
bottom: 0;
}
& + p{
margin-top: -10px !important;
}
}
figcaption{
font-family: $body-font;
position: relative;
overflow: auto;
box-sizing: border-box;
line-height: 1.8;
font-weight: normal;
text-align: center;
font-size: 24px;
bottom: 0;
margin-top: 0.5em;
margin-bottom: 1em;
color:#000;
}
}
// Gallery.
.wp-block-gallery{
position:relative;
margin: 0 0 40px 0;
padding:0;
gap: 10px !important;
--wp--style--unstable-gallery-gap: unset;
&.is-layout-flex{
display: flex;
}
.wp-block-image{
align-self: unset !important;
a{
border: none;
background-image: none;
}
img{
margin:0 !important;
height: auto !important;
}
}
.blocks-gallery-item{
overflow: hidden;
margin:0;
}
&.alignleft,
&.alignright{
margin-left: 20px;
figure.wp-block-image:not(#individual-image){
width: calc(50% - 15px) !important;
}
}
&.alignleft{
margin-left: 0;
margin-right: 20px;
}
&.alignright{
margin-right: 0;
margin-left: 20px;
}
&.aligncenter{
width: 100% !important;
margin: auto !important;
max-width: 1380px;
}
&.alignfull{
figure.wp-block-image:not(#individual-image){
width: calc(33.33% - 7px) !important;
}
}
&.alignwide{
transform: translateX(-50%);
left: 50%;
margin-left: 0 !important;
}
&:not(.alignfull):not(.alignwide){
width:calc(100%);
}
& + .wp-block-quote{
margin-top: 33px;
}
figure{
box-sizing: border-box;
}
.wp-element-caption{
font: 400 14px Josefin Sans, sans-serif;
margin: 15px 0 11px;
color: #111;
&:not(.blocks-gallery-caption){
position: absolute;
box-sizing: border-box !important;
font: 400 14px Josefin Sans, sans-serif;
text-align: left !important;
line-height: 1.8 !important;
background: none !important;
padding: 20px 20px 0px 20px !important;
color: #FFF !important;
}
}
& + .wp-block-gallery{
margin-bottom: 20px;
}
.blocks-gallery-grid{
margin: 0;
}
&:not(.alignleft):not(.alignright){
& + p{
margin-top: -20px;
}
}
}
// Columns.
.wp-block-columns{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 0 0 40px 0;
& + .wp-block-columns{
margin-top: -17px;
}
&.alignfull{
padding: 0 20px;
}
&.has-7-columns,
&.has-8-columns,
&.has-9-columns,
&.has-10-columns{
.wp-block-column {
flex-basis: 100%;
&:first-child{
margin-top:0;
};
}
}
& + .wp-block-media-text{
margin-top: -7px;
}
& + p{
margin-top: -17px;
}
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 3px;
}
& + .wp-block-separator{
margin-top: 53px;
}
}
// Column.
.wp-block-columns{
.wp-block-column{
flex: 1;
margin: 0;
h1,h2,h3,h4,h5,h6{
margin-top: 0;
text-align: left;
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6){
margin-left:20px;
}
border-collapse: collapse !important;
li:first-child{
margin-top: 0;
}
.wp-block-quote p{
margin: 0 20px 0 29px !important;
}
.wp-block-image{
.aligncenter{
margin: auto !important;
}
}
.wp-block-image + p{
margin-top: -12px !important;
}
.wp-block-embed + p{
margin-top: -10px !important;
}
.fluid-width-video-wrapper{
padding-top: 0 !important;
}
& > *:first-child{
&:not(p):not(ol):not(ul){
margin-top: 10px;
}
margin-top: 0;
}
h3, h4{
margin-top: 7px !important;
}
h4{
margin-top: 9px !important;
}
blockquote{
padding: 20px 20px 20px 30px !important;
p:before{
content: '\e93a';
font-size: 26px;
top: 16px;
left: 20px;
color: $main-color;
}
cite{
margin-left: 29px !important;
}
}
& > *:last-child{
margin-bottom: 0;
&:not(p):not(ul):not(ol){
margin-bottom: 10px;
}
}
}
}
@media (max-width: 1000px) {
.wp-block-column{
flex-basis: 100%;
margin:0;
&:nth-child(3){
margin-left: 0;
}
&:last-child{
margin: 0 0 0 20px;
}
}
.has-2-columns{
.wp-block-column {
flex: 1 1 100%;
&:nth-child(1){
margin-bottom: 23px;
}
&:nth-child(2){
margin: 0;
}
}
}
.has-4-columns,
.has-5-columns,
.has-6-columns{
.wp-block-column {
flex: 1 1 33%;
&:nth-child(3),
&:nth-child(5){
margin-left: 0;
}
&:nth-child(1),
&:nth-child(2){
margin-bottom: 23px;
}
}
}
.has-5-columns,
.has-6-columns{
.wp-block-column {
&:nth-child(4){
margin-bottom: 23px;
}
}
}
}
@media (max-width: 600px) {
.wp-block-columns {
.wp-block-column{
flex-basis: 100% !important;
margin:0 0 23px 0 !important;
}
.wp-block-column:first-child{
margin-top: 0 !important;
}
.wp-block-column:last-child{
margin-bottom: 0 !important;
}
}
}
// Featured image.
script,
.featured-image{
& + p{
margin-top: 26px;
}
& + .wp-caption{
margin-top: 33px;
}
}
p:last-of-type .alignright{
margin-top: 33px;
}
// Cover.
.wp-block-cover{
width: 100%;
margin: 0 20px 40px 0;
a{
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background-image: linear-gradient(transparent calc(100% - 1px), #FFF 1px);
color: #FFF;
}
p{
font: 700 24px $header-font;
text-transform: uppercase;
line-height: 1.2;
padding: 20px 31px 22px 31px !important;
margin: 0;
color: #FFF !important;
}
& + p{
margin-top: -7px;
}
&.has-background-dim.has-parallax{
transform: none;
left: auto;
}
& + p{
margin-top: -10px
}
& + .wp-block-separator{
margin-top: 60px;
}
&.alignleft{
margin: 0 30px 30px 0;
}
&.alignright{
margin: 0 0 0 30px;
}
}
// Tables.
table,
.wp-block-table{
overflow: hidden;
overflow-x: auto;
width: 100%;
min-width: 240px;
border-collapse: collapse;
box-sizing: border-box;
margin-bottom: 40px;
table{
margin-bottom: 0;
}
& + p,
& + ul,
& + ol{
margin-top: -10px;
}
& + .wp-block-table{
margin-top: 33px;
}
& + .wp-block-separator{
margin-top: 60px;
}
table{
min-width: 576px;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-collapse: collapse;
box-sizing: inherit;
}
tr{
display: table-row;
box-sizing: inherit;
overflow-wrap:break-word;
}
th,
td{
padding: 14px 30px;
}
th,
td{
border: 1px solid $lines-color-dark !important;
}
th{
font-weight: 700;
}
&.is-style-regular{
td{
border: 1px solid $lines-color-dark !important;
}
}
&.is-style-stripes{
tr:nth-child(odd) {
background: $input-background-color-dark;
}
border-bottom: none !important;
}
}
// Verse.
.wp-block-verse{
font-family: $body-font;
overflow: hidden;
font-style: italic;
line-height: 1.6;
border:none;
white-space:normal !important;
background: none;
padding: 0;
margin: 0 0 25px 0;
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6{
padding-top: 5px;
}
}
.wp-block-embed,
.wp-block-video{
line-height: 0;
margin: 0 0 40px 0;
figcaption{
line-height: 1.8;
font-style: italic;
margin: 12px auto -7px auto;
color: #999;
}
& + p{
margin-top: -10px;
}
}
// Archives, categories, comments, latest posts blocks.
.wp-block-archives,
.wp-block-categories{
margin: 0 30px 30px 40px !important;
&.aligncenter{
text-align: center;
}
}
.wp-block-archives-dropdown{
margin-left: 0;
select{
padding: 10px 20px;
}
}
// Latest comments.
.wp-block-latest-comments{
margin: 0 0 0 27px;
& + p{
margin-top: -5px;
}
li{
clear: both;
margin: 0 0 30px 0;
}
article{
border: none;
margin: 25px 0;
}
footer{
a:first-child{
font-weight: 700;
text-transform: uppercase;
}
time{
font-style: italic;
margin: 2px 0 10px 0;
}
}
img{
width: 60px;
height: 60px;
}
}
// Latest posts.
.wp-block-latest-posts{
& + p{
margin-top: -2px !important;
}
&:not(.has-dates){
li{
margin-top: 0 !important;
padding-right: 16px;
}
}
}
// Spacer
.wp-block-spacer{
margin:20px 0;
height: 0 !important;
clear: both;
}
// Separator
.wp-block-separator{
clear: both;
display: block;
max-width: 100px;
margin: 56px auto;
height: 1px !important;
border-bottom: 1px solid #333 !important;
&.is-style-wide{
max-width:none;
}
&.is-style-dots{
position:relative;
padding-bottom: 1px;
border: none !important;
&:before{
position: absolute;
top: -9px;
left: 0;
margin-bottom: 0;
padding: 0;
}
}
& + .wp-block-columns{
margin-top: -6px;
}
& + h1{
margin-top: 56px;
padding-top: 0;
}
& + h2{
margin-top: 57px;
padding-top: 0;
}
& + h3{
padding-top: 1px;
}
& + h4{
padding-top: 3px;
}
& + h5{
padding-top: 4px;
}
& + h6{
padding-top: 4px;
}
& + p{
margin-top: -6px;
}
}
// Preformatted.
.wp-block-preformatted,
.wp-block-code{
line-height: 1.8;
margin-bottom: 40px;
background: none;
code{
background: none;
}
& + p{
margin-top: -10px !important;
}
& + .wp-block-pullquote{
margin-top: -13px;
}
& + .wp-block-separator{
margin-top: 60px;
}
}
// Aligfull and alignwide
.alignwide,
.alignfull{
overflow:hidden;
.img{
line-height: 0;
}
&.wp-block-image{
max-width:none;
}
}
.alignwide{
position: relative;
left: 50%;
transform: translateX(-50%);
max-width: 1600px !important;
box-sizing: border-box;
}
}
}
}
// Address.
address{
font-size: 13px;
font-style: italic;
margin: 0 0 33px 0;
& + p{
margin-top: -10px !important;
}
}
// Quote.
blockquote,
.wp-block-quote{
position: relative;
border: 1px solid $lines-color-dark !important;
margin: 0 0 40px 0;
padding: 80px 140px 85px 140px !important;
&.has-text-align-left{
cite{
text-align: left;
}
}
&.has-text-align-center{
p,
cite{
text-align: center;
margin-right: 0 !important;
}
}
&.has-text-align-right{
p,
cite{
text-align: right;
margin-right: 0 !important;
}
}
& + p,
& + ul,
& + ol{
margin-top: -10px !important;
}
& + .wp-block-audio{
margin-top: 33px;
}
p{
line-height: 1.8 !important;
font-size: 18px !important;
font-style: italic;
font-weight: 700;
margin: 0 20px 0 29px !important;
&:before{
font-family: 'fwdicon';
position: absolute;
font-style: normal;
font-weight: 100;
content: '\e969';
font-size: 58px;
left: 97px;
top: 62px;
color:$main-color;
}
cite{
margin-left: 0 !important;
}
}
code{
display: inline;
border: none;
margin: 0;
padding: 0;
}
cite{
font-family: $header-font;
font-style: normal;
position: relative;
font-size: 13px;
display: block;
margin: 5px 0 0 29px !important;
strong{
font-weight: normal;
}
}
&.is-style-large{
margin: 0 0 40px 0;
padding: 67px 67px 72px 102px;
p{
margin-right: 0 !important;
&:before{
left: 98px;
top: 61px;
}
}
}
&.is-large{
margin: 0 0 40px 0;
padding: 80px 140px 85px 140px;
}
}
// Gallery.
.gallery {
margin-bottom: 30px;
}
.gallery-item {
display: inline-block;
text-align: center !important;
vertical-align: top;
width: 100%;
.gallery-icon{
margin-bottom: 30px;
}
figcaption{
text-align: center !important;
margin: -20px 0 30px;
}
a{
border: none !important;
}
}
.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-caption {
display: block;
}
// Align right and left.
p + .wp-block-image{
figure{
margin-bottom: 16px;
}
}
figure{
&.alignright{
margin-block-start: 0;
margin-block-end: 0;
margin: 0 0 0 15px;
padding: 0 0 0 15px;
}
&.alignleft{
margin-block-start: 0;
margin-block-end: 0;
margin: 0 35px 20px 0;
padding: 0;
}
&.aligncenter{
margin: auto;
}
}
// Code.
code{
font-family: monospace, monospace;
font-size: 13px;
}
pre,
code,
.wp-block-code,
.wp-block-preformatted{
display: block;
border: 1px dashed $lines-color-dark;
margin: 0 0 40px 0;
padding: 33px 30px 35px 30px;
color: #FFF;
background: #111113;
}
.wp-block-code code{
border: none;
margin: 0;
padding: 0;
}
// Audio, video block.
.wp-block-audio,
.wp-block-video{
font-style: italic;
text-align: center;
line-height: 0;
margin: 0 auto 40px auto !important;
padding: 0;
color: #999;
&.aligncenter{
figcaption{
margin: 4px auto 0;
text-align: center;
}
}
& + p{
margin-top: -10px !important;
}
figcaption{
margin: 23px 0 45px 0;
}
}
.wp-block-audio{
&.aligncenter{
figcaption{
margin-top: 23px;
}
}
}
// Media wordpress classes.
.entry-content img, .comment-content img, .widget img{
max-width:100%; /* Fluid images for posts, comments, and widgets */
}
.entry-content img,
img[class*="align"],
img[class*="wp-image-"]{
height:auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
.entry-content img,
img.size-full{
max-width:100%;
}
.entry-content img.wp-smiley, .comment-content img.wp-smiley{
border:none;
margin-bottom:0;
margin-top:0;
padding:0;
}
/**
* Image with caption.
*/
.wp-caption{
max-width:100%;
position:relative;
margin:5px 0 35px;
img{
display:block;
}
&.alignleft,
&.alignright{
margin-bottom: 0;
}
figcaption{
margin-bottom: 5px;
}
}
.wp-caption-text{
text-align:left;
color:#999;
width:100%;
font-style: italic;
margin: 10px 0 -7px 0;
padding:0;
position:relative;
top:0;
right:0;
}
// Post and page pagination.
.wp-link-pages{
font-weight: 700;
span{
text-transform: uppercase;
margin-right: 10px;
}
.post-page-numbers{
display: inline-block;
border: solid 1px #D9D9D9;
width: 50px;
background-image: none;
text-decoration: none;
text-align: center;
margin: 10px 10px 0 0;
padding: 12px 0 13px;
color: #999999;
}
.current,
a:hover{
background: #1A1A1A;
color: #FFF !important;
}
}
/**
* --------------------------------------------------------------------------------
* 4. MENU
* --------------------------------------------------------------------------------
*/
// Search form.
.acora-menu-search-holder{
position: fixed;
z-index: 99999999;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
display: none;
background-color: #FFF;
.form{
position: relative;
position: relative;
top: calc(50% - 20px);
margin: 0 20px;
text-align: left;
}
.form-holder{
position: relative;
max-width: 700px;
border-bottom: 1px solid #C4C4C4;
left: 50%;
transform: translateX(-50%);
padding: 0 20px 27px 30px;
}
.form-control{
font: 24px $body-font !important;
border: none;
line-height: 33px;
width: calc(100% - 70px);
background: transparent;
color: #000;
&::placeholder{
color: $light-grey;
}
}
.submit{
position: relative;
font-size: 32px;
top: -3px;
background-color: transparent;
border: none;
float: right;
@include animate-hover(color, 250ms);
&:active,
&:focus{
box-shadow: none;
}
&:hover{
color: $main-color;
}
}
.close{
position: relative;
top: -35px;
right: 28px;
left: auto;
display: inline-block;
font-size: 25px;
float: right;
cursor: pointer;
width: 40px;
color: #000;
@include animate-hover(color, 250ms);
&:hover{
color: $main-color;
}
}
}
// Horizontal menu.
.site-navigation,
.vm-logo{
z-index: 100;
width:100%;
.fluid{
position: fixed;
z-index: 100;
width:100%;
box-shadow: 0 0 4px rgba(255, 255, 255, .2);
border-bottom: 1px solid $lines-color-dark;
transform: translateY(-104px);
background-color:rgba(17, 17, 19, .9);
}
.inner{
max-width: 1380px;
text-align: right;
margin: auto;
}
.margin{
display: table;
width: 100%;
margin: 0 20px;
}
.has-logo{
display: table-cell;
vertical-align: middle;
width: 230px;
height: auto;
line-height: 0;
text-align: left;
a{
font-size: 22px;
line-height: 0;
padding:0;
&.text{
padding-top: 7px;
}
}
img{
max-width:230px;
height: 40px;
}
}
.search-icon{
position: relative;
top: 1px;
left: -7px;
display: table-cell;
vertical-align: middle;
text-align: left;
font-size: 16px;
width: 49px;
cursor: pointer;
color: #FFF;
@include animate-hover(color, 250ms);
&:hover{
color: $main-color;
}
}
.primary-navigation{
display: table-cell;
}
.menu{
position: relative;
float:right;
margin-right: 27px;
padding-top: 10px;
}
.primary-navigation{
display: inline-block;
margin: 28px auto 20px;
}
ul{
list-style: none;
margin: 0;
}
li{
display: inline-block;
position: relative;
text-align: left;
&:last-child{
margin-right:0;
}
}
a{
position: relative;
display: inline-block;
font: 700 14px $header-font;
text-transform: uppercase;
border: 0 none;
padding: 7px 14px 15px 15px;
color: #FFF;
@include animate-hover(color, 250ms);
&:hover {
color: $main-color;
}
}
.sub-menu {
position: absolute;
top: 33px;
left: -4px;
visibility: hidden;
box-sizing: border-box;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
padding: 0;
z-index: 10000;
transform: translateY(50px);
background: #1A1A1A;
a{
display: block;
white-space: nowrap;
font-size: 12px;
font-weight: normal;
padding: 20px 20px 17px 19px;
}
li{
display: block;
box-sizing: border-box;
width: 100%;
border-bottom: 1px solid $lines-color-dark;
margin-right:0;
&:last-child{
border-bottom: none;
}
}
}
.sub-menu-right{
right: 0;
left: auto;
}
.has-children > a:after {
content: '\e935';
font-family: 'fwdicon';
font-size: 8px;
font-style: normal;
font-weight: 700;
position: relative;
left: 6px;
top: -2px;
margin-right: 5px;
color: $light-grey;
@include animate-hover(color, 250ms);
}
.has-children.active > a:after,
.has-children.current-menu-item > a:after,
.has-children.current-menu-ancestor > a:after{
opacity: 1;
}
.has-children:hover > a:after,
.sub-menu .has-children:hover > a:after{
opacity: 1;
color: #FFF;
}
.has-children .sub-menu .sub-menu {
/* Third level submenu. */
border-bottom: 1px solid $lines-color-dark;
box-sizing: border-box;
opacity: 0;
left: 100%;
right: auto;
top: 0;
transition: opacity .4s cubic-bezier(.7,0,.2,1), transform .4s cubic-bezier(.7,0,.2,1);
}
.has-children .sub-menu {
opacity: 0;
a{
padding-right: 45px;
}
transition: opacity .4s cubic-bezier(.7,0,.2,1), transform .4s cubic-bezier(.7,0,.2,1);
}
.has-children .sub-menu.no-chidren a {
padding-right: 20px !important;
padding-left: 20px !important;
}
//.has-children:hover .sub-menu .sub-menu ,
.has-children:hover > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .4s cubic-bezier(.7,0,.2,1), transform .4s cubic-bezier(.7,0,.2,1);
}
.sub-menu .has-children > a:after {
content: '\e957';
position: absolute;
left: auto;
right: 13px;
top: auto;
}
.has-children .sub-menu .sub-menu.sub-menu-right,
.has-children .sub-menu-right .sub-menu{
right: 100%;
left: auto;
}
.sub-menu.sub-menu-right a{
//text-align: right;
//padding: 20px 20px 17px 45px;
}
.sub-menu.sub-menu-right .has-children > a:after {
// right: auto;
// left: 18px;
//transform: rotate(-180deg);
}
.active > a,
.current-menu-item > a,
.current-menu-ancestor > a,
.secondary-navigation .current-menu-parent > a {
color: $main-color;
}
}
// Vertical menu page logo.
.vm-logo{
position: fixed;
width: 0;
left: 30px;
top: 30px;
z-index: 9999991;
.has-logo{
a{
&.text{
background: #FFF !important;
padding: 23px 14px 17px 15px;
background: transparent;
}
}
&.alternative{
padding: 5px;
background: rgba(0,0,0,.6);
}
}
}
// Vertical menu.
.vertical-menu-dim{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .5);
opacity:0;
pointer-events:none;
z-index:9999998;
transition:opacity .7s ease-out;
}
.vertical-menu-visible .vertical-menu-dim{
opacity:1;
pointer-events:auto;
}
.vertical-menu{
position: fixed;
overflow: visible;
top:0;
backface-visibility: hidden;
left:100%;
margin:0;
padding:0;
width:100%;
max-width:500px;
height:100%;
z-index:9999999;
.no-logo,
.has-logo{
width:230px;
height:auto;
padding-top: 50px;
padding-bottom: 37px;
padding-left: 50px;
img{
max-width:230px;
height: 40px;
}
}
.no-logo{
position: relative;
top: 20px;
font: 22px Josefin Sans, sans-serif;
}
.background{
position:absolute;
overflow:hidden;
width:100%;
max-width:500px;
height:100%;
background:#111113;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.no-logo{
margin-bottom: 15px;
padding-top: 29px;
a{
font: 700 22px $header-font;
text-transform: uppercase;
color: #000;
&:hover{
color: $main-color;
}
}
}
.copyright-main{
position:relative;
width:100%;
.copyright{
margin:30px 0 0 0;
}
.copyright-text{
text-align: center;
font-size: 12px;
margin: 0 0 18px 3px;
padding: 0 0 30px 0;
color: #FFF;
}
.icons-wrapper{
text-align: center;
margin: 0 0 15px -3px;
padding-bottom: 30px;
a{
display: inline;
padding: 6px 9px 4px 9px;
font-size: 16px;
background: transparent;
color: #999;
&:hover,
&:focus{
color: $main-color;
}
}
& + .copyright-text{
margin-top: -31px;
}
}
}
}
.vertical-menu-toggle-selected{
background: #000 !important;
}
.vertical-menu-toggle-selected-showed{
background: #000 !important;
}
.vertical-menu-toggle-holder{
position:relative;
z-index: 100;
}
.vertical-menu-toggle{
position:absolute;
top:30px;
left:-70px;
width:26px;
height:40px;
z-index:10002;
display:block;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
padding-left:10px;
padding-right:4px;
background:#FFF;
span,
span:before,
span:after{
content:'';
position:absolute;
top:19px;
width:20px;
height:1px;
display:block;
cursor:pointer;
background:#000;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
transition:all .32s ease-out;
}
span:before{
top:-5px;
}
span:after{
top:5px;
}
span{
&.vertical-menu-toggle-lines-selected{
background:#FFF;
&:after,
&:before{
background:#FFF;
}
}
&.vertical-menu-toggle-lines-selected-showed{
background:#000;
&:after,
&:before{
background:#000;
}
}
}
&:hover{
span{
&.vertical-menu-toggle-lines-selected{
background:#FFF;
&:after,
&:before{
background:#FFF;
}
}
&.vertical-menu-toggle-lines-selected-showed{
background:#000;
&:after,
&:before{
background:#000;
}
}
}
}
transition: background-color .32s ease-out, color .32s ease-out, left .8s cubic-bezier(.7,0,.2,1), top .8s cubic-bezier(.7,0,.2,1);
}
.vertical-menu-toggle-normal{
transition: none;
background:#FFF;
span,
span:before,
span:after{
transition: none;
background: #000;
}
}
.vertical-menu-toggle-seleted{
transition: none;
background:#FFF;
span,
span:before,
span:after{
transition: none;
background:#000;
}
}
.vertical-menu--enabled{
overflow:visible;
}
.vertical-menu--showed .vertical-menu-toggle{
left: -79px;
top: 50px !important;
box-shadow: none;
background: #FFF;
backface-visibility: hidden;
outline: 1px solid transparent;
span{
background:transparent !important;
background: #000;
backface-visibility: hidden;
}
span:before{
top:0;
background: #000;
transform:rotate(43deg);
backface-visibility: hidden;
}
span:after{
top:0;
background: #000;
transform:rotate(-43deg);
backface-visibility: hidden;
}
&:hover{
background: #FFF;
span{
background: #FFF;
}
span:before,
span:after{
background: #FFF;
}
}
}
.vertical-menu-items{
overflow:auto;
top:0;
background-size:100%;
background-repeat:no-repeat;
padding:0;
width:100%;
max-width: 500px;
height:100%;
-webkit-overflow-scrolling:touch;
box-sizing:border-box;
}
.vertical-menu-items li{
position:relative;
}
.vertical-menu ul,
.vertical-menu li{
list-style:none;
margin:0;
padding:0;
}
.vertical-menu-link{
position: relative;
display: block;
font-family: $header-font;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.02em;
line-height: 1.4;
text-transform: uppercase;
margin-bottom: 1px;
padding: 8px 60px 11px 50px;
color: #FFF;
background-size: 0 !important;
}
.vertical-menu-link{
&:hover{
color: $main-color;
}
}
.mobile-device .vertical-menu-link:hover{
color:#999;
}
.vertical-menu-link-clicked{
color: #000;
}
.vertical-menu-children-toggle{
position: absolute;
top: 0;
right: 17px;
height: 100%;
width: 60px;
display: inline-block;
background-size: 0 !important;
}
.vertical-menu-children-toggle{
&:after{
position: absolute;
top: 13px;
left: 10px;
content:'\e965';
font: 700 15px 'fwdicon';
font-style: normal;
speak: none;
text-decoration: none;
display: inline-block;
color:#999;
transition:color .32s ease-out;
}
&:hover:after{
color: #FFF;
}
}
.vertical-menu-item-showed > .vertical-menu-children-toggle:after{
font-family: 'fwdicon';
content: '\e954';
color: #FFF;
}
.vertical-menu-level-1{
.vertical-menu-children-toggle:after{
top: 22px;
}
}
.vertical-menu a.vertical-menu-item-active{
color:$main-color;
//background:rgba(0,0,0,.9);
&:after{
opacity:1;
}
}
.vertical-menu li.vertical-menu-item-active > ul{
display:block;
}
.vertical-menu ul ul .vertical-menu-link{
font-family: $header-font;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
padding: 6px 10px 6px 70px;
background-size: 0 !important;
&:after{
top: 6px;
left: 29px;
height: 11px !important;
}
}
.vertical-menu ul ul ul .vertical-menu-link{
line-height: 1.6;
margin-left: 50px;
padding: 5px 10px 4px 70px;
background-size: 0 !important;
&:after{
top: 4px;
left: 29px;
height: 11px !important;
}
}
@-moz-document url-prefix(){
.vertical-menu ul ul ul .vertical-menu-link{
&:after{
top: 5px;
}
}
}
@supports (-ms-ime-align:auto){
.vertical-menu ul ul ul .vertical-menu-link{
background-size: 0 !important;
&:after{
top: 5px;
}
}
}
.vertical-menu-level-0{
position:relative;
padding-bottom: 30px !important;
}
.vertical-menu-level-1{
display:none;
.vertical-menu-link{
padding-right: 60px !important;
background-size: 0 !important;
}
li:first-child{
margin-top: -7px;
}
li:last-child{
margin-bottom: 7px;
}
}
.vertical-menu-level-2,
.vertical-menu-level-3{
display:none;
li:first-child{
margin-top: 0;
}
li:last-child{
margin-bottom: 0;
}
}
.vertical-menu-level-1{
.vertical-menu-children-toggle{
top: -14px;
}
& > li:last-child .vertical-menu-level-2{
padding-bottom: 1px;
}
}
.vertical-menu-level-2{
a{
margin-left: 20px !important;
}
}
/**
* --------------------------------------------------------------------------------
* 5. SIDEBAR
* --------------------------------------------------------------------------------
*/
.sidebar{
position:relative;
width: 280px;
float: left;
margin-left: 40px;
backface-visibility: hidden;
.inner{
overflow: hidden;
backface-visibility: hidden;
width: 280px;
margin: 0 !important;
padding-top:99px;
}
select{
width: 100%;
}
// Blockquote.
blockquote{
padding: 107px 0px 75px 20px !important;
p{
&:before{
left: 50px;
top: 27px;
}
}
}
// Table.
table{
overflow: hidden;
overflow-x: auto;
width: 100%;
min-width: 240px;
border-collapse: collapse;
box-sizing: border-box;
margin-bottom: 40px;
& + p,
& + ul,
& + ol{
margin-top: -10px;
}
& + .wp-block-table{
margin-top: 33px;
}
& + .wp-block-separator{
margin-top: 60px;
}
table{
min-width: 576px;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-collapse: collapse;
box-sizing: inherit;
}
tr{
display: table-row;
box-sizing: inherit;
overflow-wrap:break-word;
}
th,
td{
padding: 14px 30px;
}
th,
td{
border: 1px solid $lines-color-dark !important;
}
th{
font-weight: 700;
}
&.is-style-regular{
td{
border: 1px solid $lines-color-dark !important;
}
}
&.is-style-stripes{
tr:nth-child(odd) {
background: $images-background-color-dark;
}
border-bottom: none !important;
}
}
}
@-moz-document url-prefix() {
.sidebar{
margin-right:-321px;
}
}
// Scrollbar base.
.fwd-scrollbar-holder{
width:8px;
}
.fwd-scrollbar-track{
width:8px;
}
.fwd-scrollbar-handler{
width: 8px;
background: $main-color;
@include animate-hover(background-color, 300ms);
}
.fwd-scrollbar-handler-active{
background: $button-hover-color !important;
@include animate-hover(background-color, 300ms);
}
.scroll-wrapper {
overflow: hidden !important;
padding: 0 !important;
position: relative;
}
.scroll-wrapper > .scroll-content {
border: none !important;
box-sizing: content-box !important;
height: auto;
left: 0;
margin: 0;
max-height: none;
max-width: none !important;
overflow: scroll !important;
padding: 0;
position: relative !important;
top: 0;
width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
height: 0;
width: 0;
}
.scroll-element {
display: none;
}
.scroll-element, .scroll-element div {
box-sizing: content-box;
}
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
display: block;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
cursor: default;
}
.scroll-textarea {
border: 1px solid #ebebebebebeb;
border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
border: none !important;
box-sizing: border-box;
height: 100% !important;
margin: 0;
max-height: none !important;
max-width: none !important;
overflow: scroll !important;
outline: none;
padding: 2px;
position: relative !important;
top: 0;
width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
height: 0;
width: 0;
}
/**
* --------------------------------------------------------------------------------
* 6. CONTACT US PAGE
* --------------------------------------------------------------------------------
*/
.main-map-holder{
position: relative;
overflow: hidden;
}
.maps{
position: relative;
left: 50%;
background: #FFF;
}
.map-holder{
position: absolute;
width: 100%;
height: 100%;
}
.contact,
.contact-simple{
width:100%;
margin:auto;
#respond{
max-width: 1138px;
margin: 96px auto 0;
input[type="text"],
input[type="email"],
input[type="url"],
textarea{
background: $images-background-color-dark;
color: #999;
&:hover{
border-color: #222 !important;
color: #FFF !important;
}
&:focus{
color: #FFF !important;
border-color: #222 !important;
}
}
}
.wrapper{
position: relative;
min-height: calc(100vh - 160px);
padding-bottom: 160px;
}
.entry-content{
margin: auto;
width: calc(100% - 40px);
max-width: 1360px;
}
.discover-us{
overflow: hidden;
padding: 100px 100px 0;
img{
margin-bottom: 26px;
height: 40px;
}
h4{
margin-bottom: 14px;
}
.left-column{
display: inline-block;
width: calc(50% - 30px);
margin-top: -6px;
&.single{
width: 100%;
}
& > *:last-child{
margin-bottom: 0;
}
}
.right-column{
display: inline-block;
float: right;
width: calc(50% - 30px);
&.single{
width: 100%;
}
p{
margin-bottom: 33px;
}
& > *:last-child{
margin-bottom: 0;
}
}
a{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
color: #DDD;
&:hover{
color: #FFF;
}
}
p{
line-height: 1.8;
margin: 0 0 33px 0;
}
}
.comment-respond{
border: 1px solid $lines-color-dark;
margin-top: 96px;
padding: 100px !important;
.inline{
font: 700 33px $header-font;
text-transform: uppercase;
text-align: left;
position: relative;
display: inline-block;
margin: -3px 0 21px -1px !important;
padding: 3px 0 0 15px;
color: #FFF;
&:before{
content: "";
position: absolute;
width: 6px;
height: 28px;
top: 2px;
left: 0;
background: $main-color;
}
}
}
.post-edit-link{
color: #FFF;
margin-top: 40px;
&:hover{
color: #000;
background: #FFF;
}
}
.share-buttons-container{
display: none;
}
.post-edit-link{
margin-left: 10px !important;
}
.write-us{
margin-top: 90px;
}
}
.contact-simple{
position: relative;
overflow: hidden;
width: 100% ;
height: 100%;
max-width: none;
line-height: 1.8;
margin: 0;
color: #FFF;
.media-background{
width: 100%;
height: 100%;
}
.single{
position: absolute;
top:0;
width: 100vw;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .1)
}
.entry-content{
position: absolute;
max-width: 600px;
bottom: 105px;
left: 177px;
backface-visibility: hidden;
margin: 0 20px 0 0!important;
img{
height: 40px;
margin-bottom: 53px;
}
h4{
letter-spacing: 6px;
margin-bottom: 10px !important;
}
p{
margin-bottom: 0 !important;
}
.info{
& > *:last-child{
margin-bottom: 0;
}
}
.first-button,
.second-button{
margin: 32px 20px 0 0;
padding: 11px 52px 12px 53px !important;
border: none;
background: $main-color;
color: #FFF;
&:hover{
background: #FFF;
color: #000;
}
}
.second-button{
border: 1px solid #FFF !important;
margin-top: 20px;
padding: 10px 52px 11px 52px !important;
background: transparent;
color: #FFF;
}
.small-text{
margin-top: 94px !important;
font-size: 12px;
& + .small-text{
margin-top: 2px !important;
}
a{
border-bottom: solid 1px transparent;
background-image: linear-gradient(#FFF calc(100% - 1px), #ffffff 1px);
color: #FFF;
&:hover{
color: $main-color;
}
}
}
}
.cs-main-form-holder,
.cs-main-map-holder{
backface-visibility: hidden;
display: none;
position: fixed;
z-index: 99999999;
overflow-y: auto;
background: #111113;
.fwdicon-close{
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
right: 30px;
top: 30px;
left: auto;
cursor: pointer;
color: #FFF;
&:before{
position: absolute;
top: 12px;
left: 12px;
font-size: 16px;
}
&:hover{
color: $main-color;
}
@include animate-hover(all, 250ms);
}
}
.cs-main-map-holder{
.fwdicon-close{
background: #FFF;
color: #000;
&:hover{
background: #000;
color: #FFF;
}
}
}
.cs-from-holder{
position: relative;
width: calc(100% - 40px);
overflow: hidden;
margin: 0 20px;
backface-visibility: hidden;
}
.comment-respond{
backface-visibility: hidden;
max-width: 1120px;
margin: auto;
color: #000;
}
.post-edit-link{
position: fixed;
z-index: 99999999;
bottom: 20px;
right: 20px;
color: #FFF;
&:hover{
background: #FFF;
color:#000;
}
}
.cs-map-holder{
position: asolute;
width: 100%;
height: 100%;
margin: 0;
}
.main-map-holder{
position: absolute;
width: 100%;
height: 100% !important;
}
.maps{
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: $input-background-color-dark;
}
.main-share-buttons-container{
display: none;
}
}
/**
* --------------------------------------------------------------------------------
* 7. ABOUT US PAGE
* --------------------------------------------------------------------------------
*/
.about-us{
width:100%;
margin:auto;
// Slider header.
.entry-header{
position: relative;
.about-us-gallery-responsive{
max-width: 1340px;
margin: auto;
}
.header-content{
position: absolute;
width: 100%;
text-align: center;
pointer-events: none;
left: 50%;
transform: translateX(-50%);
bottom: 64px;
}
.site-name{
margin: 0 20px 21px;
color: #FFF;
}
}
// Wrapper.
.page-wrapper{
overflow: hidden;
position: relative;
min-height: calc(100vh - 160px);
padding-bottom: 160px;
}
article{
overflow: hidden;
clear:both;
margin-bottom: 75px;
&:last-of-type{
margin-bottom: 0;
};
}
// Paragraph.
p{
margin: 0 0 33px 0;
}
a{
border-bottom: 1px solid transparent;
padding: 0 0 2px;
color:#555;
&:hover{
color:#000;
border-bottom-color: #333;
}
}
// Quote.
.wp-block-quote{
border: none !important;
padding: 0 0 0 43px !important;
p{
margin: 0 20px 0 29px !important;
&:before{
left: 0;
top: -18px;
}
}
}
// Lists.
ul,ol{
&:not(.wp-block-gallery){
margin: 0 30px 21px 18px;
}
}
ul ul,
ul ol,
ol ol,
ol ul{
margin: 7px 7px 7px 20px;
}
ul li{
list-style: disc;
}
li{
&:not(.blocks-gallery-item){
margin: 13px 0;
}
}
li ol,
li ul{
margin-bottom:0 !important;
margin-left: 30px !important;
}
ul ul li,
ol ol li{
margin-left: 0 !important;
}
.avatar-holder{
.background{
background-color: $bk-dark-images !important;
}
}
// Info.
.title-holder{
margin-bottom: 61px;
}
.entry-excerpt{
position: relative;
max-width: 1170px;
font-size: 14px;
line-height: 1.8;
margin:auto;
.excerpt-content{
h1{
margin-bottom: 15px;
}
}
}
.about-us-info{
.entry-excerpt{
width: calc(100% - 40px);
margin-top: 99px;
}
}
.excerpt-content{
&.double{
display: inline-block;
width: calc(50% - 80px);
margin: 0 auto;
padding-bottom: 20px;
}
&.single{
max-width: 600px;
text-align: center;
margin: -4px auto;
& > *:last-child{
margin-bottom: 0;
}
}
& > *:last-child{
margin-bottom: 0 !important;
}
}
.separator{
position: absolute;
width: 1px;
height: 100%;
top:0;
left: 50%;
background: $lines-color-dark;
&.single{
display: none;
}
}
.excerpt-table{
position: relative;
margin: 0;
padding: 0;
&.double{
position: absolute;
width: calc(50% - 86px);
top: calc(50% - 15px);
right: 5px;
transform: translateY(-50%);
}
.col{
position: relative;
box-sizing: border-box;
float: left;
width: 50%;
margin-top: 28px;
.count{
font: 300 64px $header-font !important;
margin-bottom: 5px;
}
.text{
font-size: 18px;
font-weight: 300;
margin: 0;
padding-top: 2px;
color: #999999;
}
}
&.single{
margin: -35px 0 0 0;
transform: translateY(30px);
.col{
width: 25%;
text-align: center;
}
}
}
.we-are-grid{
position: relative;
width: calc(100% - 40px);
max-width: 1230px;
height: 310px;
z-index: 1;
margin: 70px auto 0;
background: #FFF;
.holder{
position: absolute;
width: calc(100% - 60px);
height: calc(100% - 60px);
margin: 30px;
background: $images-background-color-dark;
}
& ~ .video-holder{
margin-top: -155px;
}
.image{
position: relative;
display: inline-block;
&:hover{
img{
filter: grayscale(0%);
}
}
img{
@include animate-hover(filter, 250ms);
filter: grayscale(100%);
}
a{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
.text{
position: absolute;
font: 300 33px $header-font;
line-height: 33px;
text-transform: uppercase;
width: calc(100% - 18px);
height: 100%;
padding: 30px 0 0 18px;
background: rgba(0,0,0,.4);
color: #FFF;
strong{
font-weight: 700;
color: $main-color;
}
}
.arrow{
position: absolute;
bottom: 50px;
display: block;
font-size: 24px;
margin-top: 19px;
@include animate-hover(color, 250ms);
}
&:hover{
.arrow{
color: $main-color;
}
}
}
}
}
// Video holder.
.video-holder{
overflow: hidden;
position: relative;
margin-top: 100px;
.background{
background-color: $bk-dark-images !important;
}
.holder{
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
.header{
position: absolute;
width: 100%;
height: 100%;
background: $images-background-color-dark;
}
.overlay,
.video{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0, .4);
}
.overlay{
pointer-events: none;
}
#video{
display: none;
background: #FFF;
}
.info{
display: inline-block;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform .7s cubic-bezier(.7,0,.2,1);
.pp-info{
line-height: 19px;
}
& > *:last-child{
margin-bottom: 0 !important;
}
}
.pp-button{
display: inline-block;
position: relative;
width: 48px;
height: 48px;
margin: 0 0 16px -9px;
}
.pp-play,
.pp-pause{
position: absolute;
cursor: pointer;
left:0;
top: 0;
path{
@include animate-hover(all, 250ms);
fill: #FFF;
}
&:hover{
path{
fill: $main-color;
}
}
}
.pp-pause{
display: none;
}
.pp-info{
font: 10px $body-font;
color: #FFF;
letter-spacing: 9px;
margin: 0 !important;
}
& ~ .detailed-grid{
margin-top: 0 !important;
}
}
// Detailed grid.
.detailed-grid{
margin-top: 100px;
.image,
.details{
width: 50%;
float: left;
background-color: $input-background-color-dark;
}
.image{
.background{
background-color: $bk-dark-images !important;
}
}
.details{
position: relative;
.holder{
position: relative;
display: table;
width: calc(100% - 80px);
max-width: 570px;
height: 100%;
margin: auto;
.holder-fix{
position: relative;
display: table-cell;
vertical-align: middle;
& > :last-child{
margin-bottom: 0 !important;
}
}
.dumy{
display: block;
width: 20px;
height: 0;
margin: 0 !important;
padding: 0 !important;
opacity: 0;
}
h1{
font-size: 64px;
line-height: 64px;
width: 100%;
margin: 20px 0 17px -2px;
span{
display: inline-block;
white-space: nowrap;
}
}
p{
display: inline-block;
}
.thin{
font-weight: 300;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5em;
margin-bottom: 5px;
}
.main-color{
color: $main-color;
}
.button-light{
position: relative;
backface-visibility: hidden;
border: 1px solid #1a1a1a;
margin: 45px 20px 0 0;
padding: 11px 51px 12px 53px !important;
background: $lighter-grey;
color: #000;
&:hover{
border-color: $main-color;
background: $main-color;
color: #FFF;
}
}
}
}
#second_image{
float: right;
}
}
// Team.
.team{
width: calc(100% - 40px);
max-width: 1340px;
margin: auto;
.title-holder{
margin-bottom: 50px;
}
.title{
max-width: 600px;
text-align: center;
margin: 96px auto 0;
h1{
margin-bottom: 0;
}
p{
line-height: 1.8;
margin: 14px 0 0 0 !important;
}
}
.avatar-holder{
position:relative !important;
float:left;
overflow:hidden;
display:inline-block;
width:100%;
max-width:540px;
}
.avatar{
position:relative;
background: #1A1A1A;
.image-background{
background: #1A1A1A !important;
}
}
.info{
position: absolute;
width: calc(100% - 60px);
bottom: 0;
padding: 0 30px 24px 30px;
background: rgba(0,0,0,.6);
}
.name{
font-size: 24px;
margin: 27px 0 0 !important;
color: #FFF;
}
.position{
font-size: 12px;
font-style: italic;
margin: 0 !important;
color: $main-color;
}
.phone,
.email{
display: inline-block;
font-size: 14px;
margin: 13px 0 0 !important;
color: #FFF;
}
.phone{
margin-right: 5px !important;
}
.email{
line-height: .3;
a{
border: none;
background-image: linear-gradient(transparent calc(100% - 1px), $main-color 1px);
background-position: 0 100%;
color: #FFF;
background-size: 0 2px;
&:hover{
background-size: 100% 2px;
}
}
span{
margin:-2px 5px 0 0;
}
}
.entry-excerpt{
position: absolute;
top: 50%;
left: 540px;
transform: translateY(-50%);
margin: 0 0 0 50px;
& > *:last-child{
margin-bottom: 0;
}
}
}
.main-share-buttons-container{
margin: 0 0 0 -6px;
.label{
position: relative;
top: -2px;
font-size: 14px;
font-weight: 700;
margin: 0 8px 0 6px;
}
}
.share-btns-container{
display:inline-block;
a{
display:inline-block;
border:none;
font-size:16px;
padding: 6px 9px 4px 9px;
background:transparent;
color:#999;
&:hover,
&:focus{
color: $main-color;
}
}
}
.avatar{
margin-top:5px;
}
.right{
.avatar-holder{
float:right;
}
.entry-excerpt{
left: 0 !important;
margin: 0 60px 0 0;
}
}
.edit-button-holder{
max-width: 1380px;
margin: auto;
}
.post-edit-link{
margin: 40px 0 0 20px;
border-bottom: 1px solid $lines-color-dark;
&:hover{
background: $button-hover-color-dark;
color: #000;
}
}
// Minimal grid.
#acora_team_grid{
max-width: 1170px;
margin: -5px auto 0;
.background{
background: $input-background-color-dark;
}
.extra-text-normal{
box-sizing: border-box;
}
.team-default{
background: rgba(0,0,0,.8);
height: calc(100% - 20px);
text-align: center;
margin: 10px !important;
padding: 20px;
}
.in{
position: absolute;
width: 100%;
height: 100%;
}
.info{
position: absolute;
width: auto;
font-size: 14px;
font-weight: 300;
line-height: 19px;
top: 40%;
bottom: auto;
transform: translateY(-60%);
background: transparent;
margin: 0 16px 0;
padding: 0;
color: #FFF;
}
.link{
position: absolute;
width: 100%;
font-weight: 700;
text-transform: uppercase;
backface-visibility: hidden;
bottom: 40px;
a{
background-image: linear-gradient(#FFF calc(100% - 1px), #FFF 1px);
background-position: 0 100%;
color: #FFF;
&:hover{
color: $main-color;
}
}
}
.extra-content{
text-align: center;
}
.name{
text-transform: none;
font-size: 19px;
margin: 20px 20px 2px !important;
color: #FFF;
a{
border: none;
background-position: 0 100%;
padding: 0;
color: #FFF;
&:hover{
color: $main-color;
}
}
}
.position{
font-size: 12px;
font-style: normal;
margin-bottom: 2px !important;
color: #999 !important;
}
.share-btns-container{
display:inline-block;
margin-top: 12px;
a{
display:inline-block;
border:none;
font-size:16px;
padding: 6px 9px 4px 9px;
background:transparent;
color:#999;
&:hover,
&:focus{
color: $main-color;
}
}
}
}
}
// Gallery fluid width.
.about-us-gallery-fluidwidth{
position:relative;
left: 50%;
margin-bottom:1px;
background:$images-background-color-dark;
}
#fwdsiscDiv0,
#fwdsiscDiv1{
.fwdsisc{
background: $images-background-color-dark !important;
}
.image-background{
background: $bk-dark-images !important;
}
}
/**
* --------------------------------------------------------------------------------
* 8. HOME SLIDER
* --------------------------------------------------------------------------------
*/
.home-slider{
.title-main{
position: fixed;
z-index:1;
left: 30px;
top: 50%;
}
.title{
font: 700 12px $body-font;
text-align: center;
display: inline-block;
text-transform: uppercase;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: 0 0;
letter-spacing: 0.2em;
border-radius: 50px;
background: rgba(0,0,0, .5);
padding: 12px 25px;
color: #FFF;
}
}
.FWDHS{
.background{
background: rgba(0,0,0, .6);
}
.number{
display: inline-block;
font-family: 'Josefin sans';
font-weight: 200;
line-height: 1;
color:#FFF !important;
}
.line{
background: #999;
}
.title{
overflow: visible;
position: relative;
}
.small{
.main-holder{
.text{
margin-bottom: 4px !important;
}
.count{
top: -5px;
}
}
}
.separator{
margin-bottom: 14px;
}
.main-holder{
overflow: visible;
width: calc(100% - 40px);
max-width: 400px;
display: block !important;
text-align: center;
margin: 0 auto !important;
padding: 0 !important;
.count,
.desc{
position: relative;
display: inline;
letter-spacing: 0.03em;
font: bold 14px $body-font !important;
top: -12px;
margin: 0 auto 26px;
color: #FFF;
&:after{
position: absolute;
content:"";
width: 100%;
height: 1px;
left: 0;
top: 22px;
background: #999;
}
}
.text{
display: inline;
box-sizing: border-box;
font-family: $header-font !important;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 1.4;
letter-spacing: 0.03em;
margin: 0;
padding: 0;
color: $main-color;
}
.desc{
display: block;
font-weight: 300 !important;
top: 0;
line-height: 1.8 !important;
margin: auto;
padding-top: 15px;
&:after{
height: 0;
}
}
}
}
// Home simple.
.home-simple{
position: relative;
overflow: hidden;
width: 100% ;
height: 100%;
max-width: none;
line-height: 1.8;
margin: 0;
color: #FFF;
.media-background{
width: 100%;
height: 100%;
}
.single{
position: absolute;
top:0;
width: 100vw;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .1)
}
.entry-content{
position: absolute;
max-width: 525px;
bottom: 105px;
left: 177px;
margin: 0 20px 0 0!important;
h2{
margin-bottom: 16px !important;
}
p{
margin-bottom: 0 !important;
}
.info{
& > *:last-child{
margin-bottom: 0;
}
}
.first-button,
.second-button{
margin: 34px 20px 0 0;
padding: 11px 52px 12px 53px !important;
border: none;
background: $main-color;
color: #FFF;
&:hover{
background: #FFF;
color: #000;
}
}
.second-button{
border: 1px solid #FFF !important;
margin-top: 20px;
padding: 10px 52px 11px 53px !important;
background: transparent;
color: #FFF;
}
}
}
// About me.
.about-me{
overflow: hidden;
width: 100%;
max-width: none;
margin: 0;
// Slider header.
.entry-header{
position: relative;
.about-us-gallery-responsive{
max-width: 1340px;
margin: auto;
}
.header-content{
position: absolute;
width: 100%;
text-align: center;
pointer-events: none;
left: 50%;
transform: translateX(-50%);
bottom: 64px;
}
.site-name{
margin: 0 20px 21px;
color: #FFF;
}
}
.page-wrapper{
overflow: hidden;
position: relative;
min-height: calc(100vh - 160px);
padding-bottom: 160px;
}
// Main info.
.main-info{
position: relative;
float: right;
margin-top: 100px;
& ~ .what-i-do{
margin-top: 180px;
}
& ~ .portfolio{
margin-top: 180px;
padding-top: 77px;
}
.info{
position: absolute;
width: 550px;
height: calc(100% - 120px);
z-index: 1;
h1{
width: 250px;
font-size: 88px;
line-height: 88px;
letter-spacing: 0.27em;
margin: 0 0 18px 0;
}
.separator{
width: 60px;
height: 1px;
margin-bottom: 60px;
background: $lines-color-dark;
}
span{
display: inline-block;
border-radius: 50px;
margin:0 10px 29px 0;
padding: 4px 18px 5px;
background: $main-color;
color: #FFF;
}
p{
line-height: 1.8;
}
.share{
position: absolute;
bottom: -8px;
}
.follow{
font-weight: 700;
margin-bottom: 3px;
}
.share-btns-container{
display:inline-block;
margin: 0 0 0 -11px;
a{
display:inline-block;
border:none;
font-size:16px;
padding: 6px 9px 4px 9px;
background:transparent;
color:#999;
&:hover{
span{
color: #FFF;
}
}
}
span{
margin: 0;
padding: 0;
background: transparent;
color: #999;
@include animate-hover(color, 250ms);
}
}
}
.image{
float: right;
background: $images-background-color-dark;
}
}
// What I do.
.what-i-do{
width: calc(100% - 40px);
max-width: 1170px;
margin: 100px auto 0;
~ .portfolio{
margin-top: 95px;
}
&.two ~ *{
margin-top: 84px;
}
h1{
line-height: 50px;
margin: 0 0 15px 0;
}
p{
line-height: 1.8;
}
.one{
max-width: 800px;
text-align: center;
margin: auto;
}
.two:first-child{
float: left;
width: 40%;
}
.two{
display: inline-block;
float: right;
width: 50%;
}
}
.accordion{
margin: 0;
.panel{
margin: 0;
.panel-content{
border: none;
line-height: 1.8;
margin: -1px 0 11px;
padding: 0 0 0 30px !important;
}
&:first-child{
margin-top: -14px;
}
}
.panel-active{
.panel-title{
a{
&:after{
content: '\e954';
top: 16px;
left: 0;
}
}
}
}
.panel-title{
border: none !important;
background: transparent !important;
a{
font: 700 18px $body-font;
padding: 11px 30px 11px;
&:after{
content: '\e965';
top: 16px;
left: 0;
}
&:hover{
background: transparent !important;
color: $main-color;
}
}
}
}
// CLients.
.clients{
position: relative;
margin-top: 50px;
max-width: 1170px;
overflow: hidden;
margin: 98px auto 0;
.background{
background: $images-background-color-dark;
}
.margin-left,
.margin-right{
position: absolute;
top: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(to left, rgba(255,255,255,0) , #111);
}
.margin-right{
right: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) , #111);
}
.main-thumbs-holder{
overflow: visible !important;
}
& ~ .portfolio{
margin-top: 100px;
}
}
// Our portfolio.
.portfolio{
position: relative;
backface-visibility: hidden;
width: 100%;
padding: 100px 0 100px;
background: #1a1a1a;
.background{
background: $images-background-color-dark;
}
.main-holder{
width: calc(100% - 40px);
max-width: 800px;
margin:auto;
}
.large-info{
position: relative;
text-align: center;
margin: 0 0 56px 0;
}
h1{
line-height: 50px;
margin: 20px 0 15px 0 !important;
}
p{
line-height: 1.8;
}
#myGGParent0,
#myGGParent1{
position: relative;
height: 320px;
backface-visibility: hidden;
}
#myGGParent1{
margin-top: 20px;
}
}
.contact{
width: calc(100% - 40px);
max-width: 1170px;
margin: 100px auto 0 !important;
.two{
display: inline-block;
width: calc(50% - 50px);
}
.details{
h1{
margin: -3px 0 14px -1px;
& + p{
margin-bottom: 42px;
}
}
h4{
font: 700 14px $body-font;
margin: 26px 0 9px -1px !important;
& + p{
margin-top: -2px !important;
}
}
p{
line-height: 1.8;
margin-top: -6px !important;
}
a{
display: inline-block;
line-height: 1.5;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
color: #DDD;
& ~ a{
margin: 6px 0 4px 0;
}
}
}
.form{
position: relative;
float: right;
margin-top: -8px;
&.one{
float: none;
max-width: 700px;
}
label{
font-size:12px;
font-weight: 700;
text-transform: uppercase;
display: block;
width: 140px;
padding:4px 0 5px 0;
color: $button-hover-color-dark;
}
textarea{
width: 100%;
height: 151px;
box-sizing: border-box;
border: 1px solid #222;
font-family: $body-font;
font-size:14px;
padding: 9px 19px 11px;
}
input[type="text"],
input[type="email"],
input[type="url"],
textarea{
background-color: $input-background-color-dark !important;
color: #FFF !important;
}
}
.required{
font-size:10px;
font-weight:700;
color:#f00;
}
.comment-form-author,
.comment-form-email,
.comment-form-url{
overflow:visible !important;
input{
font-family: $body-font;
box-sizing: border-box;
display:inline-block;
border: 1px solid $lines-color-dark;
font-size: 14px;
letter-spacing: 0.03em;
width:48%;
padding: 9px 19px 11px;
}
}
.comment-form-author{
width: 100%;
#author{
width: 100%;
}
}
.comment-form-email{
margin-top: 12px !important;
}
.comment-form-url,
.comment-form-comment{
margin-top: 12px !important;
}
.comment-form-url{
position: absolute;
top: 70px;
right: 0;
width: 48%;
label,
input{
width: 100%;
}
}
.form-submit{
margin-top: 20px !important;
input{
font-size: 14px;
font-weight: 700;
display:inline-block;
letter-spacing: 0.03em;
text-transform: uppercase;
border:none;
padding: 19px 50px;
background: $main-color;
color: #FFF;
@include animate-hover(all, 250ms);
&:hover{
background: #FFF;
color: #000;
}
}
}
.share-buttons-container{
display: none;
}
}
.edit-link-holder{
width: calc(100% - 40px);
max-width: 1170px;
margin: 40px auto 0 !important;
.edit-link{
display: inline-block;
}
}
}
// Home extended.
.home-extended{
overflow: hidden;
width: 100%;
max-width: none;
margin: 0;
// Video holder.
.main-header{
overflow: hidden;
position: relative;
}
.wrapper{
position: relative;
margin: 0;
}
.header-holder{
position: relative;
width: 100%;
height: 100%;
text-align: center;
.background{
background: $bk-dark-images !important;
}
.overlay,
.video{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0, .4);
}
.overlay{
pointer-events: none;
}
#video{
display: none;
background: #FFF
}
.info{
position:absolute;
width: 100%;
bottom: 80px;
pointer-events: none;
& > *:last-child{
margin-bottom: 0 !important;
}
}
.pp-button{
display: inline-block;
position: relative;
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.pp-play,
.pp-pause{
position: absolute;
cursor: pointer;
left:0;
top: 0;
path{
@include animate-hover(all, 250ms);
fill: #FFF;
}
&:hover{
path{
fill: $main-color;
}
}
}
.pp-pause{
display: none;
}
.pp-info{
font: 10px $body-font;
color: #FFF;
letter-spacing: 9px;
margin-bottom: 51px !important;
}
.large-info{
color: #FFF;
h1{
font-weight: 300 !important;
margin-bottom: 8px;
}
strong{
font-weight: 900 !important;
}
p{
font-size: 14px;
font-weight: 100;
}
}
}
.header{
position: absolute;
width: 100%;
height: 100%;
background: $images-background-color-dark;
}
// We are.
.we-are{
position: relative;
margin: 0 20px;
}
.images{
width: 100%;
max-width: 1170px;
margin: 90px auto 0 auto;
.img1,
.img2,
.img3{
float:left;
position: relative;
display: inline-block;
width: 470px;
height: 652px;
margin: 0;
line-height: 0;
background: $images-background-color-dark;
.image-background,
.background{
background: $images-background-color-dark !important;
}
p{
position: absolute;
left: 14px;
bottom: 19px;
font-size: 12px;
opacity: 0.85;
font-style: italic;
color: #FFF;
}
}
.img1{
float:left;
margin-top: 70px;
}
.img2{
float:left;
width: 270px;
height: 364px;
margin-left:30px;
}
.img3{
float:left;
width: 370px;
height: 246px;
margin: 180px 0 0 30px;
}
.large-info{
position: relative;
float: right;
width:572px;
margin-top: -170px;
h1{
letter-spacing: 0.5em;
line-height: 50px;
margin: 0;
& + p{
margin-top: 18px !important;
}
}
p{
line-height: 1.8;
}
blockquote{
border: none !important;
margin: 20px 0 34px 0 !important;
padding: 0 0 0 35px !important;
p{
font-weight: 600;
line-height: 26px;
color: #999;
&:before{
font-size: 46px;
left: 0;
top: -13px;
}
}
cite{
margin-top: 16px;
color: #999;
}
}
.first-button,
.second-button{
position: relative;
border: none;
backface-visibility: hidden;
margin: 67px 20px 0 0;
padding: 11px 51px 12px 53px !important;
background: $main-color;
color: #FFF;
&:hover{
background: #FFF;
color: #000;
}
}
.second-button{
border: 1px solid #222 !important;
margin-top: 20px;
padding: 10px 52px 11px 53px !important;
background: transparent;
color: #FFF;
}
}
.post-edit-link{
position: fixed;
bottom: 20px;
right: 20px;
color: #FFF;
&:hover{
background: #FFF;
color:#000;
}
}
& > *:last-child{
margin-bottom: 0;
}
}
// Our members.
.our-members{
position: relative;
overflow: visible;
max-width: 1700px;
backface-visibility: hidden;
margin: 0 auto;
.holder{
position: relative;
border: solid 1px $lines-color-dark;
margin: 200px 41px 0 21px;
padding: 50px 0 40px;
.col{
position: relative;
text-align: center;
box-sizing: border-box;
border-left: 40px transparent solid;
float: left;
.count{
font: 300 64px $header-font !important;
margin-bottom: 5px;
}
.text{
font-size: 18px;
font-weight: 300;
padding-top: 2px;
color: #999999;
}
}
.main-col{
position: relative;
display: inline-block;
float: left;
top: auto;
transform: none;
border-left: none !important;
padding-left: 0;
.main-col-content{
display: inline-block;
border-left: none !important;
padding-left: 0;
}
h2{
position: relative;
left: 30px;
box-sizing: border-box;
border-right: 40px transparent solid;
text-align: right;
display: inline-block;
line-height: 50px !important;
font-size: 44px;
margin: 0 !important;
}
}
}
}
// Our story.
.story{
width: 100%;
max-width: 1064px;
margin:200px auto 0;
.main-holder{
overflow: hidden;
margin: 0 20px;
}
#st_img1{
float: right;
width: 334px;
height: 502px;
margin: 0 !important;
background: $images-background-color-dark;
.image-background,
.background{
background: $images-background-color-dark !important;
}
}
.large-info{
float: right;
text-align: right;
padding-right: 48px;
& > div{
margin-bottom: 31px;
}
h1{
letter-spacing: 0.5em;
line-height: 50px;
margin: -3px 0 0 0;
}
p{
line-height: 1.8;
margin: 16px 21px 73px 0 !important;
}
a{
text-align: right;
font-weight: 700;
font-size: 18px;
line-height: 1.6;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin: 0 21px 0 0;
color: #FFF;
&:hover{
color: $main-color;
}
}
& > *:last-child{
margin-bottom: 0;
}
}
#st_img2{
position: relative;
width: 370px;
height: 230px;
margin: -39px 0 0 0 !important;
background: $images-background-color-dark;
.image-background,
.background{
background: $images-background-color-dark !important;
}
a{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
.text{
position: absolute;
font-size: 18px;
font-weight: 700;
line-height: 24px;
text-transform: uppercase;
bottom: 28px;
left: 33px;
color: #FFF;
}
.arrow{
display: block;
font-size: 24px;
margin-top: 19px;
color: #FFF;
@include animate-hover(color, 250ms);
}
&:hover{
.arrow{
color: $main-color;
}
}
}
}
}
// Our portfolio.
.portfolio{
position: relative;
backface-visibility: hidden;
width: 100%;
margin: 258px auto 0;
background: transparent !important;
.background{
background: $images-background-color-dark;
}
.main-holder{
max-width: 800px;
margin:auto;
}
.large-info{
position: relative;
margin: 0 0 56px 93px;
}
.rotate{
position: absolute;
left: -81px;
bottom: -7px;
transform: rotate(-90deg);
transform-origin: 0;
letter-spacing: 0.2em;
font-weight: 300 !important;
font-size: 16px;
border-bottom: 1px solid #C4C4C4;
margin: 0 !important;
padding-bottom: 4px;
color: #FFF;
span{
font-weight: 700 !important;
}
}
h1{
letter-spacing: 0.5em;
line-height: 50px;
margin: 20px 0 15px 0 !important;
}
p{
line-height: 1.8;
max-width: 550px;
}
#myGGParent0,
#myGGParent1{
position: relative;
height: 320px;
backface-visibility: hidden;
}
#myGGParent1{
margin-top: 20px;
}
}
// Happy clients.
.happy-clients{
margin: 97px 20px 0;
.inner{
position: relative;
text-align: center;
max-width: 1000px;
margin: auto;
padding-left: 20px;
h1{
position: relative;
display: inline-block;
line-height: 50px;
letter-spacing: 0.5em;
margin: 0 0 15px 0;
}
p{
position: relative;
line-height: 1.8;
}
}
.grid-holder{
max-width: 1170px;
margin: 51px auto 0;
.avatar-main{
box-sizing: border-box;
border-radius: 100%;
}
.border{
width: calc(100% + 10px);
height: calc(100% + 10px);
left: -5px;
top: -5px;
pointer-events: none;
box-sizing: border-box;
border:1px solid $lines-color-dark !important;
border-radius: 100%;
}
.avatar-info{
width: 100%;
max-width: 500px !important;
height: 300px;
text-align: center;
margin: auto;
}
.name{
font-family: $header-font;
font-weight: 600;
font-size: 14px;
line-height: 20px;
margin-top: 14px;
color: #FFF;
}
.position{
font-size: 12px;
line-height: 20px;
margin-top: -2px !important;
color: #999;
}
.quote{
margin-top: 24px;
stroke: $lines-color-dark;
}
.details{
font-style: italic;
font-weight: 600;
font-size: 18px;
line-height: 26px;
margin-top: 5px;
}
.fwdgg-button-normal{
position:absolute;
overflow: visible !important;
width:48px;
height:48px;
font-size: 16px !important;
color: #666;
cursor: pointer;
}
.fwdgg-button-selected{
position:absolute;
overflow: visible !important;
top: 0;
width:48px;
height:48px;
font-size: 16px !important;
color:#FFF;
cursor: pointer;
}
.circles{
display: inline-block;
height: 86px;
margin: auto;
}
.circle{
position: relative !important;
display: inline-block;
margin: 74px 20px 0 0 !important;
}
.circle:last-child{
margin-right: 0 !important;
}
.circle-normal{
width: 12px;
height: 12px;
border-radius: 100%;
background: #333;
}
.circle-selected{
width: 12px;
height: 12px;
border-radius: 100%;
background: #FFF;
}
}
}
// Our team.
.our-team{
margin: 100px 20px 0;
.inner{
position: relative;
text-align: center;
max-width: 523px;
margin: auto;
padding-left: 20px;
.background{
position: absolute;
width: 100vw;
height: calc(100% + 230px);
top: 0;
left: 50%;
transform: translateX(-50%);
background: $images-background-color-dark;
}
h1{
position: relative;
display: inline-block;
line-height: 50px;
letter-spacing: 0.5em;
margin: 97px 0 15px 0;
}
p{
position: relative;
line-height: 1.8;
}
}
.grid-holder{
max-width: 1170px;
margin: 56px auto 0;
#acora_grid{
height: 300px;
}
.background{
background: $images-background-color-dark;
}
.extra-text-normal{
box-sizing: border-box;
}
.team-default{
background: rgba(0,0,0,.8);
height: calc(100% - 20px);
text-align: center;
margin: 10px !important;
padding: 20px;
}
.in{
position: absolute;
width: 100%;
height: 100%;
}
.info{
position: absolute;
font-size: 14px;
font-weight: 300;
line-height: 19px;
top: 40%;
transform: translateY(-60%);
margin: 0 16px 0;
color: #FFF;
}
.link{
position: absolute;
width: 100%;
font-weight: 700;
text-transform: uppercase;
backface-visibility: hidden;
bottom: 40px;
a{
background-image: linear-gradient(#FFF calc(100% - 1px), #FFF 1px);
background-position: 0 100%;
color: #FFF;
&:hover{
color: $main-color;
}
}
}
.extra-content{
text-align: center;
}
.name{
text-transform: none;
margin: 20px 20px 9px !important;
a{
background-position: 0 100%;
color: #FFF;
&:hover{
color: $main-color;
}
}
}
.position{
font-size: 12px;
margin: -6px 0 2px 0 !important;
margin-bottom: 2px;
color: #999;
}
.share-btns-container{
display:inline-block;
margin-top: 12px;
a{
display:inline-block;
border:none;
font-size:16px;
padding: 6px 9px 4px 9px;
background:transparent;
color: #999;
&:hover,
&:focus{
color: $main-color;
}
}
}
}
.team-read-more{
position: relative;
text-align: center;
margin: 50px 0 0 -10px;
left: 50%;
transform: translateX(-50%);
transform: translateX(calc(-50% - 2px));
a{
position: relative;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
background-position: 0 100%;
color: #FFF;
&:after{
content: '\e904';
font: 700 15px 'fwdicon';
position: absolute;
right: -25px;
top: 2px;
}
&:hover,
&:focus{
color: $main-color;
&:after{
@include animate-hover(color, 250ms);
color: $main-color;
}
}
}
}
}
// Our blog.
.our-blog{
margin: 188px 20px 0;
.inner{
text-align: center;
max-width: 1170px;
margin: auto;
padding-left: 20px;
h1{
line-height: 50px;
letter-spacing: 0.5em;
margin-bottom: 15px;
}
p{
line-height: 1.8;
}
}
.grid-holder{
max-width: 1170px;
margin: 55px auto 0;
#acora_grid{
height: 575px;
}
.background{
background: $images-background-color-dark;
}
.extra-text-normal{
border: 1px solid $lines-color-dark !important;
border-top: none !important;
box-sizing: border-box;
padding: 30px !important;
}
.category{
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
margin-top: -1px;
color: $main-color;
}
.title{
font-size: 18px;
font-style: normal;
line-height: 26px;
margin: -1px 0 0 -1px!important;
padding:16px 0 0;
}
.excerpt{
margin: 4px 0 0 -1px !important;
line-height: 24px;
}
.blog-read-more{
position: relative;
backface-visibility: hidden;
margin: 24px 0 0 -1px;
a{
position: relative;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
color: #FFF;
background-position: 0 100%;
transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease-out;
&:after{
position: absolute;
content: '\e904';
font: 700 15px 'fwdicon';
right: -25px;
top: 2px;
}
&:hover{
transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease-out;
color: $main-color;
&:after{
transition: color 0.3s ease-out;
color: $main-color;
}
}
}
}
.separator{
width: 25px;
height: 1px;
margin: 38px 0 17px -1px;
background: $lines-color-dark;
}
.author{
display: inline-block;
font-weight: 700;
font-size: 12px;
margin: 0;
}
.posted-on{
display: inline-block;
font-size: 12px;
margin-left: 10px;
color: #999999;
}
}
}
// CLients.
.clients{
position: relative;
margin-top: 50px;
max-width: 1170px;
overflow: hidden;
margin: 50px auto 0;
.background{
background: $images-background-color-dark;
}
.margin-left,
.margin-right{
position: absolute;
top: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(to left, rgba(255,255,255,0) , #111);
}
.margin-right{
right: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) , #111);
}
.main-thumbs-holder{
overflow: visible !important;
}
}
// Instagram feed.
.instagram{
margin-top: 15px;
.fwdsisc-info-holder{
position: relative;
z-index: 1;
display: inline-block;
top: 18px;
left: 50%;
transform: translateX(-50%);
border-radius: 21px;
padding: 6px 31px;
background: $button-hover-color;
}
.fwdicon-instagram{
font-size: 16px;
color: #FFF;
}
.text{
position: relative;
top: -2px;
font-size: 12px;
padding-left: 6px;
color: #FFF;
}
#insta_holder{
position: relative;
background: $images-background-color-dark;
}
.PGThumbnailOverlay{
background:#000;
}
.fwdicon-link{
font-size: 26px !important;
backface-visibility: hidden;
color: #FFF;
}
}
.post-edit-link{
margin: 20px;
}
}
/**
* --------------------------------------------------------------------------------
* 8. PORTFOLIO
* --------------------------------------------------------------------------------
*/
/*
* Archive.
* The !important in this section is used to overwrite the inline style used in the grid.
*/
.portolio-archive,
.related-projects,
.clients-holder,
.portfolio,
.fwdigp{
position:relative;
.main .main-holder{
top: auto !important;
bottom: 0 !important;
// Fix IE bug, for some reason it ads a background color that should not be there.
background-color: transparent !important;
}
.bk{
position:fixed;
width:100%;
height:100vh;
}
// Search.
.p-wrapper{
position:fixed !important;
overflow:hidden;
width:40px;
top: 30px;
right: 80px;
z-index: 9999993 !important;
background:rgba(0,0,0,.6);
color: #FFF;
&.showed{
background: #000;
}
span{
font-size: 24px;
float:left;
line-height: 0;
margin: 8px 8px 8px 8px;
}
.search{
cursor: pointer;
}
}
.p-search {
position:absolute !important;
font: 14px Open Sans;
left: 32px !important;
padding: 10px 0 10px 18px !important;
letter-spacing: 0.03em;
background: transparent;
color: #FFF;
}
.arrow-mobile-normal{
top: 0;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-color: rgba(0,0,0,.6);
}
.arrow-mobile-selected{
top: 0;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-color: #000;
}
.arrow-mobile-normal .arrow-mobile-i,
.arrow-mobile-selected .arrow-mobile-i{
left: 13px !important;
top: 9px !important;
color: #FFF;
}
.p-nothing-found{
font-size: 14px;
}
// Combobox.
.p-selector{
position:fixed !important;
left: auto !important;
left: auto !important;
top: 30px;
right: 70px;
z-index: 9999992 !important;
}
.p-buttons-background{
width:100%;
background:#000;
}
.PGMenuButtonsSpacers{
background:rgba(30,30,30,.8);
}
.PGMenuButtonBackgroundNormal{
background:rgba(0,0,0,.6);
}
.PGMenuButtonBackgroundSelected{
background:#050505;
}
.PGMenuSelectorTextNormal{
font: normal 700 14px $header-font;
text-transform: uppercase;
padding: 14px 5px 11px 17px;
color:#FFF;
}
.PGMenuSelectorTextSelected{
font: normal 700 14px $header-font;
text-transform: uppercase;
padding: 14px 5px 11px 17px;
color: $main-color;
}
.PGMenuButtonTextNormal{
font: normal 14px $body-font !important;
padding: 10px 18px;
color: #FFF;
}
.PGMenuButtonTextSelected{
font: normal 14px $body-font !important;
padding: 10px 18px;
color: $main-color;
}
.arrowNormal{
top: 1px !important;
border-right: 1px solid !important;
border-bottom: 1px solid !important;
backface-visibility: hidden !important;
border-color:#FFF !important;
}
.arrowSelected{
top: 1px !important;
border-right: 1px solid !important;
border-bottom: 1px solid !important;
backface-visibility: hidden !important;
border-color:#FFF !important;
}
.background{
background: $bk-dark-images !important;
}
.PGThumbnailOverlay{
background:#000;
}
// Thumbnail.
.default-arrow-main{
position: relative !important;
overflow: visible !important;
margin-bottom: 28px !important;
}
.default-arrow{
position: relative !important;
font-size: 47px;
margin-left: 30px;
color: #FFF;
}
.default-arrow:before{
font-weight: 100 !important;
}
.default-categories-main{
position: relative !important;
overflow: visible !important;
margin: 0 0 17px 30px !important;
.categories{
font: italic 12px $body-font;
position: relative !important;
padding-left:15px;
color: $main-color;
&:nth-child(2){
margin:0 20px !important;
color: #FF0000;
}
.category{
margin:0 6px;
}
.fwdicon-categories:before{
font-size: 14px !important;
position: absolute;
left: 0;
top: 2px;
color: $main-color;
}
.separator{
color: #999;
}
}
}
.title-default{
overflow: visible !important;
text-transform: uppercase;
.in{
position: relative !important;
font: 700 24px 'Josefin sans';
line-height: 1.2;
margin:0 30px 9px 29px;
color: #FFF;
}
}
.default-client-main{
position: relative !important;
display: inline-block;
float: left;
.client{
position: relative !important;
font: 12px 'Open sans';
display: inline-block;
margin:0 0 39px 29px;
color:#FFF;
.fwdicon-author:before{
position: absolute;
font-size: 14px !important;
left: 0;
top: 1px;
}
span{
padding-left: 10px;
}
}
}
.default-likes-main{
font: 14px $body-font;
position: relative !important;
overflow: visible !important;
display: inline-block;
float: left;
margin: 0 30px 39px 30px !important;
color: #FFF;
.like{
position: relative !important;
overflow: visible !important;
display: inline-block;
padding-left: 20px;
.fwdicon{
position: absolute;
font-size: 14px;
left: 0;
top: 2px;
color: $main-color;
&:before{
font-size: 14px !important;
color: $main-color !important;
}
}
}
.count{
position: relative;
top: -1px;
}
}
}
.related-projects,
.portfolio.entry-navigation{
background-color: transparent !important;
}
.fwdigp{
background-color:$input-background-color-dark !important;
.close{
display: inline-block;
top: 332px !important;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;;
border-radius: 50px;
padding: 14px 40px !important;
background: $main-color;
color: #FFF;
@include animate-hover(background, 250ms);
&:hover{
background: #000;
}
}
.default-likes-main{
.like{
.fwdicon{
top: 2px;
}
}
.count{
top: 2px;
}
}
.fwdicon-sound,
.fwdicon-sound-off{
position: relative;
top: 0px !important;
}
.fwdevp-volume-scrubber{
left: 2px !important;
}
}
/* Look/unlook scroll. */
.look{
overflow: visible !important;
top: 20px !important;
left: 20px !important;
}
.look .look-background-normal-state{
border-radius: 100%;
padding: 13px 12px !important;
line-height: 16px !important;
background: rgba(0,0,0,.6);
}
.look .look-background-selected-state{
border-radius: 100%;
padding: 13px 12px !important;
line-height: 16px !important;
background: rgba(0,0,0,1);
}
.look .look-fwdicon-normal-state{
left: 12px !important;
top: 13px !important;
overflow: visible !important;
font-size: 26px !important;
color: #999 !important;
}
.look .look-fwdicon-selected-state{
left: 12px !important;
top: 13px !important;
overflow: visible !important;
font-size: 26px !important;
color: #FFF !important;
}
.fwdicon-phone-blocked,
.fwdicon-phone-unblooked,
.fwdicon-wheel-blocked,
.fwdicon-wheel-unblooked{
&:before{
font-size: 26px !important;
}
}
@media screen and (max-width: 500px){
.look{
top: 11px !important;
left: 11px !important;
}
}
#acora_portfolio_igp_archive{
position: relative;
.p-selector{
z-index: 0 !important;
}
}
.fwdigp-gallery{
display: none;
}
// Single portfolio.
// -------------------------------------------------
.portfolio-main{
overflow: hidden;
width:100%;
max-width: none !important;
margin:auto;
article{
overflow: hidden;
margin:0;
}
.image-background{
background: #1A1A1A !important;
}
.main{
margin:0 20px;
}
.main-inner{
max-width: 1340px;
margin: auto;
}
.scrollbar-macosx{
position: relative;
padding: 100px 0 0;
}
.entry-header{
position: relative;
display:inline-block;
width: 211px;
height: 50px !important;
.inner{
position: relative;
width: 211px;
.sub:last-child{
margin-bottom:0;
}
}
.scrollbar-macosx{
position: relative;
&:before{
position: absolute;
content:'';
width: 100px;
height: 100px;
left: 150px;
top: 0;
background: #111113;
}
}
.title{
display:inline-block;
position:relative;
margin:20px 0 17px 0 !important;
padding:0 !important;
height:100%;
.title-holder{
display: inline-block;
&.password{
.block{
display:none;
}
.inline{
display:inline;
margin:0 19px;
}
}
}
.block{
display:inline-block;
text-transform:uppercase;
float:left;
font-size:30px;
line-height: 1.5 !important;
text-align:left !important;
box-decoration-break: clone;
box-shadow: none !important;
margin-bottom:1px;
padding:0 12px 2px 12px !important;
color:#FFF;
background:#000000;
}
}
.client,
.categories,
.tags-container{
margin:0 0 35px 0;
overflow:hidden;
.widget-title{
margin: 0 0 10px 0;
background: transparent;
color:#FFF;
}
.link{
position: relative;
overflow: visible;
margin:0 0 12px 30px;
&:before{
content:"";
position:absolute;
width: 20px;
height: 1px;
left: -31px;
top: 11px;
background: $small-link-line-color-dark;
};
}
.link:last-child,
&:last-child{
margin-bottom: 0;
}
a{
font: normal 14px $body-font;
margin-bottom: 40px;
color: #FFF;
background-position: 0 100%;
}
.in{
clear:both;
h1{
display: inline-block !important;
}
.widget-title{
font-size:13px;
font-weight: normal;
padding: 3px 8px 4px 9px;
}
h1:first-child{
.widget-title{
padding-left:13px;
}
}
}
}
.tags-container{
a{
font-size: 15px;
background-image: none;
color: #999;
}
.in{
margin: 0 35px 0 -9px;
}
.link{
display: inline-block;
margin: 0 0 7px 5px;
a{
border: none;
}
&:before{
content: none;
}
}
}
}
.entry-content{
overflow:hidden;
float:right;
border-left: 1px solid $lines-color-dark;
width: 100%;
max-width: calc(100% - 272px);
margin: 0 !important;
padding-left: 40px;
&.no-header{
max-width: none;
border: none;
}
&.password{
border: none;
max-width: none;
.separator{
margin-top: 40px;
}
input[type="password"]{
margin-right: 20px;
}
input[type="submit"]{
margin: 20px 0 0 -10px;
}
}
.title{
margin: 99px 0 12px -2px !important;
padding: 0 !important;
}
.meta{
margin: 0 20px 0 -7px;
}
.separator{
margin-top: 54px;
}
.main-share-buttons-container{
float: none;
border-top: solid 1px $lines-color-dark !important;
line-height: 0;
margin:38px 0 0;
padding: 12px 0 0 0;
.label{
margin-left: 0;
}
.fwdicon:before{
top: 0;
}
}
}
.bottom-content{
max-width: 1380px;
margin: auto;
& > *:last-child{
margin-bottom: 0 !important;
}
}
.separator2{
position: relative;
clear: both;
clear: both;
height: 53px;
top: -6px;
background:#111113;
&.no-header{
height: 0;
}
}
.separator3{
margin: 0 20px;
border-top:1px solid $lines-color-dark;
}
.related-projects{
clear: both;
margin: 100px 20px 0;
background-color: transparent !important;
.title{
position: relative;
padding-left: 15px;
margin-bottom: 42px;
background-color: transparent !important;
&:before{
content: "";
position: absolute;
width: 6px;
height: 27px;
top: 2px;
left: 0;
background:$main-color;
};
}
}
.entry-navigation{
border-top: 1px solid $lines-color-dark;
margin: 3px 20px -72px;
padding: 40px 0 0;
&.password{
max-width: 1340px;
width: calc(100% - 40px);
margin: auto;
}
&.has-header{
margin-top: 0;
}
a{
margin-bottom: 0 !important;
}
.back{
transform: none !important;
}
& + #comments{
margin-top: 112px;
border-top: 1px solid $lines-color-dark !important;
}
&.no-navigation{
display: none;
margin-top: -39px;
& + #comments{
margin-top: 1px;
}
}
&.no-comments{
margin-bottom: -500px;
}
&.has-share{
&:not(.has-header){
margin-top: -40px;
}
}
&.no-header.no-navigation + #comments{
margin-top: 56px;
}
&.no-header.no-navigation.has-share + #comments{
margin-top: 11px;
}
}
.related-projects + .entry-navigation + #comments{
margin-top: 102px !important;
}
.related-projects + .entry-navigation{
margin: 0 20px -10px;
border: none;
}
.related-posts ~ #comments,
.single.no-meta ~ #comments{
margin-top: 99px;
border-top: 1px solid $lines-color-dark;
}
.commentlist + #respond{
margin-top: 96px;
padding-top: 80px;
border-top: 1px solid $lines-color-dark;
}
.entry-footer{
clear:both;
}
.main-share-buttons-container{
&.has-header{
border-bottom: solid 1px $lines-color-dark !important;
padding: 12px 0 11px 0 !important;
}
}
}
.portfolio-16-8,
.portfolio-16-7,
.portfolio-vertical{
position:relative;
background: $input-background-color-dark;
}
.portfolio-vertical-fit{
max-width: 1340px;
margin: auto;
}
.portfolio-fullscreen{
position:relative;
background:$input-background-color-dark;
}
#portfolio_holder .fwdsisc{
left: -1px !important;
}
// Slider global.
.fwdsisc{
height:100%;
.main-holder{
display: inline-block;
margin:0 0 14px 30px;
padding: 0;
.text{
display: inline-block;
font: 700 24px $header-font;
text-transform: uppercase;
margin: 0 !important;
padding: 0 !important;
color:#FFF;
}
}
.image-background{
background-color: $bk-dark-images !important;
}
}
.fwdevp{
.fwdevp-time{
color: #B9B9B9 !important;
}
}
.fwdsisc-info-holder{
border-radius: 20px;
}
.fwdsisc-button-normal{
position:absolute;
overflow: visible !important;
width:48px;
height:48px;
font-size: 16px !important;
background:rgba(0,0,0,.6);
color:#FFF;
cursor: pointer;
}
.fwdsisc-button-selected{
position:absolute;
overflow: visible !important;
width:48px;
height:48px;
font-size: 16px !important;
background:#FFF;
color:#000;
cursor: pointer;
}
.fwdsisc-zoom-button .fwdsisc-button-normal{
width: 24px !important;
height: 16px !important;
background: transparent;
}
.fwdsisc-zoom-button .fwdsisc-button-selected{
width: 24px !important;
height: 16px !important;
background: transparent;
color: #FFF;
}
.fwdsisc-fullscreen-button .fwdsisc-button-normal{
width: 24px;
height: 16px;
background: transparent;
}
.fwdsisc-fullscreen-button .fwdsisc-button-selected{
width: 24px;
height: 16px;
background: transparent;
color: #FFF;
}
.fwdsisc-count{
font: 100 16px $body-font !important;
display: inline-block !important;
line-height: 1.0 !important;
letter-spacing: 0.05em !important;
color: #a2a2a2;
.separator{
margin: 0 3px;
}
}
.fwdsisc-current{
color: #FFF;
}
.table-plugin-fwdsisc-button{
display: table;
position:absolute;
overflow: visible;
width:100%;
height:100%;
.table-cell-fwdsisc-plugin-button{
display: table-cell;
overflow: visible;
width:100%;
height: 100%;
vertical-align: middle;
text-align:center;
&.fwdicon-right{
font-size:15px;
padding:2px 1px 0 3px;
}
&.fwdicon-left{
font-size:15px;
padding:2px 0 0 0;
}
}
}
.align-top{
top:-1px !important;
}
.fwd-holder:last-child{
margin-bottom: 10px !important;
}
.fwd-holder:first-child{
margin-top: 29px !important;
}
.fwdsisc.no-display{
display: none !important;
}
/**
* --------------------------------------------------------------------------------
* 9. PLUGINS
* --------------------------------------------------------------------------------
*/
// Ultimate Video Player.
//--------------------------------------------------------------------------------
.UVPMainButtonsNormalState{
font-family: "fwdicon";
overflow: visible!important;
font-size:18px !important;
color:#888 !important;
}
.UVPMainButtonsSelectedState{
font-family: "fwdicon";
overflow: visible !important;
font-size:18px !important;
color:#FFF !important;
}
.fwduvp{
.fwdicon{
font-family: "fwdicon";
font-size: 20px;
}
}
.fwdicon:before{
position: relative;
}
.fwdicon-10{
position: relative;
left: -2px;
font-size: 22px;
}
.fwdicon-cast{
font-size: 23px;
}
.fwdicon-FF-left,
.fwdicon-FF-right{
font-size: 25px;
}
.fwdicon-sound:before,
.fwdicon-sound-off:before{
font-size: 22px;
top: 1px;
}
.fwdicon-download:before{
top: 0;
}
.fwdicon-embed{
font-size: 25px !important;
}
.fwduvp-playlist .fwdicon-shuffle:before{
top: -1px;
font-size: 26px;
}
.fwduvp-playlist .fwdicon-loop:before{
font-size: 20px;
top: 1px;
left: 6px;
}
.fwduvp-playlist .fwdicon-FF-left:before,
.fwduvp-playlist .fwdicon-FF-right:before{
font-size: 25px;
top: -1px;
}
.UVPLargePlayButtonNormalState{
position:absolute;
font-size: 30px !important;
width: 76px !important;
height:59px !important;
cursor: pointer;
background:#1f1f1f !important;
color:#6a6a6a !important;
}
.UVPLargePlayButtonSelectedState{
position: absolute;
font-size: 30px !important;
width: 76px !important;
height:59px !important;
cursor: pointer;
background:#1f1f1f !important;
color:#FFF !important;
}
.UVPLargePlayButtonNormalState .fwdicon-play:before,
.UVPLargePlayButtonSelectedState .fwdicon-play:before{
position: relative;
top: 2px;
}
.UVPCloseButtonNormalState,
.UVPCategoriesNextAndPrevNormalState{
position:absolute;
font-size:16px;
width:40px;
height:39px;
cursor: pointer;
background:#1f1f1f;
color:#FFF;
}
.UVPCloseButtonSelectedState,
.UVPCategoriesNextAndPrevSelectedState{
position:absolute;
font-size:16px;
width:40px;
height:39px;
cursor: pointer;
background:#1f1f1f;
color:#F00;
}
.UVPCategoriesNextAndPrevNormalState{
background:#000000;
color:#666666;
}
.UVPCategoriesNextAndPrevSelectedState{
background:#000000;
color:#FFF;
}
.UVPSocialMediaButtonsNormalState{
font-size:18px !important;
color:#FFF !important;
font-weight:100;
}
.UVPSocialMediaButtonsSelectedState{
font-size:18px !important;
color:#0099FF !important;
}
.table-fwduvp-button {
display: table; width:100%; height:100%;
}
.table-cell-fwduvp-button {
display: table-cell; width:100%; height: 100%; vertical-align: middle; text-align:center;
}
.fwduvp-time{
font: 14px $body-font !important;
}
.fwduvp .arrow{
left:-10px !important;
}
.fwduvp .fwdicon-sound,
.fwduvp .fwdicon-sound-off{
position: relative;
top: -1px;
}
/* Playlist */
.fwduvp-ytb-title{
font-size: 14px !important;
margin: 10px 8px !important;
}
.fwduvp-ytb-p{
font-size: 14px !important;
margin: 10px 8px!important;
}
.fwduvp-playlist .acora-search{
font: normal 14px $body-font !important;
padding: 5px 8px 6px !important
}
.fwduvp-playlist-name{
}
.fwduvp-cb-selector{
font: 700 14px $header-font !important;
text-transform: uppercase;
padding: 8px 0 0 10px !important;
}
.fwduvp-cb-button{
font: 700 14px $header-font !important;
padding: 8px 0 0 10px !important;
}
.fwduvp-playlist-data{
display: none;
}
/* Subtitle */
.UVPSubtitle{
font-family:Arial !important;
text-align:center !important;
color:#FFF !important;
text-shadow: 0 0 1px #000000 !important;
font-size:20px !important;
line-height:24px !important;
font-weight:600 !important;
margin:0 !important;
padding:0 !important;
margin-left:20px !important;
margin-right:20px !important;
margin-bottom:12px !important;
}
.lightDarkCategoriesTitle{
font-family: $body-font !important;
color:#BBBBBB !important;
margin:5px !important;
margin-top:6px !important;
font-size:15px !important;
font-weight:100 !important;
}
.lightDarkCategoriesType{
font-family: $body-font !important;
margin:5px !important;
margin-top:-4px !important;
line-height:16px !important;
font-weight:100 !important;
}
.lightDarkCategoriesTypeIn{
font-family: $body-font !important;
color:#BBBBBB !important;
}
.lightDarkCategoriesDescription{
font-family: $body-font !important;
color:#BBBBBB !important;
margin:5px !important;
margin-top:-4px !important;
line-height:16px !important;
line-height:16px !important;
font-weight:100 !important;
}
.lightDarkThumbnailTitle{
font-family: $body-font !important;
color:#FFF !important;
line-height:16px !important;
margin:0 !important;
margin-top:2px !important;
margin-bottom:4px !important;
padding:0 !important;
}
.lightDarkThumbnailDesc{
font-family: $body-font !important;
color:#888888 !important;
line-height:16px !important;
margin:0 !important;
padding:px !important;
}
.lightDarkVideoTitleDesc{
font-family: $body-font !important;
margin:12px !important;
margin-bottom:8px !important;
color:#FFF !important;
}
.lightDarkVideoMainDesc{
font-family: $body-font !important;
margin:10px !important;
margin-top:0 !important;
margin-bottom:8px !important;
line-height:16px !important;
color:#888888 !important;
}
.lightDarkLink{
font-family: $body-font !important;
margin:12px !important;
margin-top:0 !important;
margin-bottom:8px !important;
line-height:16px !important;
color:#888888 !important;
}
.minimialDark700{
font-family: $body-font !important;
font-weight:700 !important;
color:#FFF !important;
}
.ytbChangeColor{
font-family: $body-font !important;
font-weight:300 !important;
}
.lightDarkLink a:link {color:#FFF !important;}
.lightDarkLink a:visited {color:#FFF !important;}
.lightDarkLink a:hover {color:#DDDDDD !important;}
.lightDarkLink a:active {color:0099FF !important;}
// Infinite Grid Pro.
//--------------------------------------------------------------------------------
.fwdigp{
/* Grid icons. */
.fwdicon{
&.fwdrlin{
&:before{
font-size: 26px !important;
backface-visibility: hidden;
color: #FFF;
}
}
}
.main{
background-color: $bk-dark-images !important;
}
/* Combobox. */
.p-selector{
position:absolute !important;
left: auto !important;
top: 100px !important;
left: auto !important;
top: 30px !important;
right: 70px;
}
.p-buttons-background{
width:100%;
background:#000;
}
.PGMenuButtonsSpacers{
background:rgba(30,30,30,.8);
}
.PGMenuButtonBackgroundNormal{
background:rgba(0,0,0,.6);
}
.PGMenuButtonBackgroundSelected{
background:#050505;
}
.PGMenuSelectorTextNormal{
font: normal 700 14px 'Josefin sans';
text-transform: uppercase;
padding: 15px 5px 10px 17px;
line-height: normal !important;
color:#FFF;
}
.PGMenuSelectorTextSelected{
font: normal 700 14px 'Josefin sans';
text-transform: uppercase;
padding: 15px 5px 10px 17px;
line-height: normal !important;
color: $main-color;
}
.PGMenuButtonTextNormal{
font: normal 14px 'Josefin sans' !important;
padding: 10px 18px;
color: #FFF;
}
.PGMenuButtonTextSelected{
font: normal 14px 'Josefin sans' !important;
padding: 10px 18px;
color: $main-color;
}
.arrowNormal{
top: 1px !important;
border-right: 1px solid !important;
border-bottom: 1px solid !important;
backface-visibility: hidden !important;
border-color:#FFF !important;
}
.arrowSelected{
top: 1px !important;
border-right: 1px solid !important;
border-bottom: 1px solid !important;
backface-visibility: hidden !important;
border-color:#FFF !important;
}
.background{
background: $bk-dark-images !important;
}
.PGThumbnailOverlay{
background:#000;
}
/* Caption. */
.caption{
text-align: center;
}
.caption .caption-in{
top: auto !important;
bottom: 0 !important;
}
.caption .title{
font: 700 16px $header-font !important;
line-height: 21px !important;
text-transform: uppercase;
margin: 0 20px 0 !important;
color: #FFFFFF !important;
}
.caption .desc{
font: 400 14px $body-font !important;
font-style: italic !important;
line-height: 19px !important;
margin: 5px 20px 15px !important;
color: #E9E9E9 !important;;
}
.caption .desc a{
text-decoration: none;
background-image: linear-gradient(#E9E9E9 calc(100% - 2px), #E9E9E9 1px);
background-position: 0 calc(100% + 1px);
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out;
border-bottom: 1px solid rgba(233, 233, 233, 0.4);
color: #E9E9E9;
}
.caption .desc a:hover{
background-size: 100% 1px;
color: #FFFFFF;
}
}
.page-template-default{
.fwdigp{
/* Combobox. */
.p-selector{
right: 30px;
}
}
}
.fwdigp{
/* Combobox. */
.p-selector{
right: 30px;
}
}
.page-template,
.igp-portfolio{
.fwdigp{
/* Combobox. */
.p-selector{
right: 70px;
}
}
}
/* Infinit grid lighox */
/* Lightbox skin.*/
.fwdigp-rl-button{
position: relative !important;
width: 42px;
height: 42px;
font-size: 23px;
background-color:rgba(0,0,0,.4);
color: #B9B9B9;
transition: all .25s ease-out;
.fwdicon{
&:before{
font-size: 20px;
}
}
}
.fwdigp-rl-button .fwdicon{
position: absolute;
}
.fwdigp-rl-button.selected{
background-color:rgba(255,255,255,0);
color:#FFF;
}
.fwdicon-close{
left: 11px;
top: 8px;
}
.fwdicon-play,
.fwdicon-pause{
left: 13px !important;
top: 7px !important;
}
.fwdicon-zoomin{
left: 9px;
top: 8px;
}
.fwdicon-zoomout{
left: 10px;
top: 8px;
}
.fwdigp-rl-button .fwdicon-fullscreen,
.fwdigp-rl-button .fwdicon-normalscreen{
position: absolute !important;
left: 11px !important;
top: 7px !important;
}
.fwdicon-share{
left: 10px;
top: 8px;
}
.fwdicon-next{
left: 11px !important;
top: 7px !important;
}
.fwdicon-prev{
left: 9px !important;
top: 7px !important;
}
.fwdigp-rl-share-button .fwdigp-rl-button{
background-color: transparent;
color: #000;
}
.fwdigp-rl-share-button .fwdigp-rl-button.selected{
background-color: transparent;
color: #FFF;
}
.fwdicon-facebook{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.facebook.selected{
background-color: #1877F2;
}
.fwdicon-twitter{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.twitter.selected{
background-color: #1DA1F3;
}
.fwdicon-linkedin{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.linkedin.selected{
background-color: #0A66C2;
}
.fwdicon-tumblr{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.tumblr.selected{
background-color: #FF8A00;
}
.fwdicon-pinterest{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.pinterest.selected{
background-color: #FF8A00;
}
.fwdicon-reddit{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.reddit.selected{
background-color: #F74300;
}
.fwdicon-buffer{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.buffer.selected{
background-color: #2C4BFF;
}
.fwdicon-digg{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.digg.selected{
background-color: #2066A3;
}
.fwdicon-blogger{
top: 8px;
left: 11px;
}
.fwdigp-rl-button.blogger.selected{
background-color: #F74300;
}
.rl .fwdicon-10{
position: relative !important;
left: -3px !important;
}
@media screen and (max-width: 600px){
.fwdevp .fwdicon-watch-later{
left: 4px !important;
}
}
.rl .fwdicon-cast{
left: 4px !important;
top: 2px !important;
}
/* Caption bottom out. */
.fwdigp-rl-caption.out .fwdrl-title{
margin: 21px 0 0 !important;
}
.fwdigp-rl-caption.out .fwdrl-desc{
margin: 5px 0 0 !important;
}
@media screen and (max-width: 600px){
.fwdigp-rl-caption.out .fwdrl-title{
margin: 21px 10px 0 !important;
}
.fwdigp-rl-caption.out .fwdrl-desc{
margin: 5px 10px 0 !important;
}
}
/* Caption. */
.fwdigp-rl-caption{
text-align: center;
}
.fwdigp-rl-caption .fwdrl-title{
font: 700 18px $header-font !important;
line-height: 21px;
text-transform: uppercase;
margin: 21px 20px 0;
color: #FFFFFF;
}
.fwdigp-rl-caption .fwdrl-desc{
font: 400 14px $body-font !important;
line-height: 19px;
margin: 5px 20px 0;
color: #E9E9E9;
}
.fwdigp-rl-caption .fwdrl-desc strong{
color: #FFFFFF !important;
}
.fwdigp-rl-caption .fwdrl-desc a{
text-decoration: none;
background-image: linear-gradient(#E9E9E9 calc(100% - 2px), #E9E9E9 1px);
background-position: 0 calc(100% + 1px);
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out;
border-bottom: 1px solid rgba(233, 233, 233, 0.4);
color: #E9E9E9;
}
.fwdigp-rl-caption .fwdrl-desc a:hover{
background-size: 100% 1px;
color: #FFFFFF;
}
/* Caption top/bottom in. */
.fwdigp-rl-caption.bottomin .background,
.fwdigp-rl-caption.topin .background{
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 8.85%, rgba(0, 0, 0, 0.171875) 38.54%, rgba(0, 0, 0, 0.510026) 68.75%, #000000 100%);
opacity: 0.6;
}
.fwdigp-rl-caption.topin .background{
transform: rotate(180deg);
}
.fwdigp-rl-caption.bottomin .fwdrl-title{
margin-top: 50px !important;
}
.fwdigp-rl-caption.bottomin .fwdrl-desc{
margin: 5px 10px 15px !important;
}
.fwdigp-rl-caption.bottomin.small-screen .fwdrl-title{
margin: 50px 10px 0 !important;
}
.fwdigp-rl-caption.bottomin.small-screen .fwdrl-desc{
margin: 5px 10px 15px !important;
}
.fwdigp-rl-caption.topin .fwdrl-title{
margin-top: 29px !important;
}
.fwdigp-rl-caption.topin .fwdrl-desc{
margin-bottom: 50px !important;
}
.fwdigp-rl-caption.topin.small-screen .fwdrl-title{
margin: 15px 10px 0 !important;
}
.fwdigp-rl-caption.topin.small-screen .fwdrl-desc{
margin: 5px 10px 50px !important;
}
/* Share buttons. */
.fwdigp-rl-share{
width: 194px !important;
border-radius: 2px;
/* This is set by default in the settings, uncomment it to use it. */
/*background-color: #FFFFFF !important;*/
}
.fwdigp-rl-share .rl-pointer{
/* This is set by default in the settings, uncomment it to use it. */
/*background-color: #FFFFFF !important;*/
}
.fwdigp-rl-share .fwdigp-rl-text{
font: 400 14px $header-font;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #E3E3E3 !important;
padding: 18px 0 10px !important;
color: #1E1E1E;
}
.fwdigp-rl-share .fwdigp-rl-buttons-holder{
padding: 15px 18px 2px !important;
}
.fwdigp-rl-share .fwdigp-rl-share-button{
margin: 0 16px 10px 0 !important;
}
.fwdigp-rl-share .fwdigp-rl-share-button:nth-child(3n){
margin-right: 0 !important;
}
/* Counter. */
.fwdigp-rl-counter .text{
text-align: center;
padding: 9px 8px !important;
transform-origin: top left;
background-color:transparent !important;
color: #B9B9B9;
}
.fwdigp-rl-counter.in .text{
transform: rotate(90deg) !important;
}
/**
* --------------------------------------------------------------------------------
* 10. PAGE TEMPLATES
* --------------------------------------------------------------------------------
*/
.page-only-shortcode-responsive{
width: 100%;
max-width:1360px;
margin: auto;
}
.page_only_shortcode_fullscreen,
.page_only_shortcode_full_width,{
position:absolute;
width:100%;
&:not(.password){
height:100vh;
}
.fwdigp-grid,
.fwduvp{
width:100% !important;
height:100% !important;
}
.main{
position:relative;
width:100%;
max-width:1360px;
margin:auto;
padding:0 0 1px 0;
background:$content-background-color;
}
.entry-header{
height:auto;
.title{
margin:0 0 0 18px;
padding: 20px 20px 0 1px;
.block{
display:inline;
font-size:30px !important;
line-height:1.6;
text-transform:uppercase;
box-decoration-break: clone;
box-shadow:12px 0 0 #000, -19px 0 0 #000;
padding: 4px 0 7px 0;
background:#000;
color:#FFF;
}
}
}
.entry-content{
position:relative;
font-size:15px;
margin: 20px;
p{
margin: 20px 0;
}
}
&.password{
.edit-link{
position:absolute;
left: 0;
bottom: -48px;
}
}
.fwdsisc{
height:100%;
.background{
background: #1A1A1A !important;
}
.image-background{
background: #1A1A1A !important;
}
}
.edit-link{
position: absolute;
left: 10px;
top: 10px;
}
.post-edit-link{
background: #FFF;
}
}
.uvp-home{
position: relative;
.fwduvp{
width:100% !important;
height:100% !important;
}
.uvp-info{
margin: 30px 30px 0;
img{
max-width: 230px;
height: 40px;
margin-bottom: 38px;
}
h4{
font-weight: 300 !important;
margin-bottom: 12px !important;
color: #FFF;
strong{
font-weight: 700;
}
}
p{
line-height: 1.8;
margin: -6px 0 37px 0 !important;
color: #999;
}
}
}
/**
* --------------------------------------------------------------------------------
* 10. WIDGETS
* --------------------------------------------------------------------------------
*/
.vertical-menu-sidebar{
width: 100%;
max-width: 500px;
z-index: 500;
.wrapper{
padding: 13px 0 49px;
margin: 0 50px 0;
}
.widget-title{
font-size: 14px;
margin-left: 0;
}
.acora-widget-igp{
height: 193px;
}
}
.widget{
text-align:left;
margin: 0 0 45px 0;
}
.widget .menu{
position: relative;
}
.widget:last-child{
margin-bottom:0;
}
.widget a{
font-size: 14px;
background-position: 0 100%;
color: #FFF;
}
.widget ul{
list-style:none;
}
.widget ul ul{
margin:4px 15px 4px 0;
}
.widget ul ul ul ul ul{
margin-left: 0;
li{
margin-left: 0;
}
}
.widget li{
position: relative;
margin: 0 0 12px 32px;
a, p, div{
line-height: 1.8;
}
ul{
margin: 12px 15px 4px -18px;
}
&:before{
content: "";
position: absolute;
width: 20px;
height: 1px;
left: -31px;
top: 13px;
background: $small-link-line-color-dark;
}
}
.widget .current_page_item > a,
.widget li a.active,
.widget .current-cat a{
padding-bottom:2px;
color: $main-color;
}
.widget li a.active .hash{
color:#111;
}
.widget-title{
position:relative;
font:700 18px $header-font;
text-transform:uppercase;
text-align:left;
margin-bottom:11px;
padding-bottom:4px;
color:#FFF;
}
.widget-title a{
color:inherit;
}
// Custom quote image.
.quote-widget{
img{
display: inline-block;
width: 65px;
height: 65px;
border-radius: 100%;
}
div{
display: inline-block;
width: calc(100% - 80px);
float: right;
}
p{
font-weight: 700;
font-size: 14px;
font-style: italic;
line-height: 20px;
margin: -3px 10px 0 0;
}
cite{
display: inline-block;
font-size: 12px;
font-style: normal;
margin: 5px 0 6px 0;
}
&:after{
content: "";
clear: both;
display: table;
}
}
// Text widget.
.textwidget{
&.custom-html-widget{
margin:-6px 0 0 0;
font: 14px $body-font;
color:#000;
}
form{
margin-top: 20px;
}
}
.textwidget img{
width:100%;
height:auto;
}
// PHP widget.
.phpcfngxwidget{
font: 14px $body-font;
}
// Image widget.
.widget_media_image{
img{
width: 100%;
}
}
/*
* Offer .list class that allows
* to achieve same style as other lists in sidebar.
*/
.textwidget .list{
font-family:$body-font;
}
.widget-content{
margin:3px 0 0 0;
font-size:13px;
color:#999;
padding-bottom:2px; /* gives space for <a /> underline */
}
//Standard WP widgets.
.widget .count{
color:#ebebeb;
min-width:23px;
padding:0 0 0 5px;
display:inline-block;
font-size:13px;
}
.widget .recentcomments{
color:#999;
font-size:13px;
}
.widget .recentcomments a:before{
content:' ';
display:block;
}
.widget_rss{
margin-bottom:47px;
.rsswidget{
color:#222;
text-transform:uppercase;
margin:0;
}
.widget-title{
a{
font: 700 18px $header-font;
}
}
img{
margin-left: 1px;
}
.rss-date{
display: block;
margin: 1px 0 10px;
color: #999;
}
.rssSummary{
color: #000;
margin-bottom: 5px;
}
li{
margin-bottom: 13px;
}
cite{
display: block;
margin-top: -4px;
color: #999;
}
}
select{
border-color: $lines-color-dark;
}
select,
option{
font: 14px $body-font;
padding: 15px 18px;
}
// Achive widget.
.widget_archive{
select{
margin-top: 10px;
}
}
// Calendar widget.
.widget_calendar{
margin-bottom: 52px;
}
// About widget.
.about-widget{
p{
font-size:14px;
line-height: 1.8;
color:#FFF;
a{
background-position: 0 calc(100% + 1px);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
color: #555;
}
}
}
// Block group
.wp-block-group{
margin-bottom: 28px;
}
// Categories widget.
.widget_categories{
select{
margin: 10px 0 7px 0;
}
}
// Search widget.
.widget-search{
margin-bottom: 52px;
}
.no-results{
.form{
position: relative;
margin: 21px 0 -3px;
}
input[type="search"]{
display: inline-block;
font: 14px $body-font;
box-sizing: border-box;
width: 225px;
border-style: none;
padding: 17px 22px;
background: $images-background-color-dark;
&:before{
font: 16px 'fwdicon';
content:'\e965';
position:absolute;
top:0;
left:0;
}
}
button{
margin-left: -45px;
border: none;
color: #000;
@include animate-hover(color, 250ms);
&:hover{
color: $main-color;
}
}
}
.wp-block-search__inside-wrapper{
margin-bottom: 28px !important;
}
.widget_search{
input{
border: 1px solid $lines-color-dark;
padding: 9px 10px;
background: #111113;
color: #FFF !important;
}
.wp-block-search__inside-wrapper {
border: none !important;
}
button{
padding: 12px 18px 10px;
position: relative;
position: relative;
top: 1px;
left: 4px;
font: 14px $body-font;
color: #FFF;
transition: all 250ms ease-out;
background-image: none;
border: none;
background:$lines-color-dark;
&:hover{
background-color: $orange;
transition: all 250ms ease-out;
&:before{
transition: all 250ms ease-out;
color: #FFF;
}
.fwdicon{
transition: all 250ms ease-out;
color: #FFF;
}
}
}
.wp-block-search__button{
background-color: $orange;
font: 700 12px Open Sans, arial, sans-serif;
border: none;
color: #FFF;
&:hover{
color: #000;
transition: all 250ms ease-out;
background-color: #FFF;
&:before{
transition: all 250ms ease-out;
color: $orange;
}
}
}
}
.widget_block{
h2{
font-size: 18px;
margin-bottom: -32px;
padding-bottom: 4px;
}
.wp-block-group__inner-container{
h2{
font-size: 18px;
margin-bottom: 14px;
padding-bottom: 4px;
}
}
&.widget_search{
input{
border: 1px solid $lines-color-dark;
padding: 9px 10px;
}
button{
top: 0;
&:hover{
background-color: #000 !important;
color: #FFF !important;
}
}
}
}
.widget_search{
width: 100%;
}
// Tag cloud widget.
.widget_tag_cloud{
.tagcloud{
margin: 12px 0 -9px -2px;
padding:0;
a{
position: relative;
display: inline-block;
font-size: 16px !important;
border: none;
background-image: none;
margin:0 0 7px 5px;
color: $tags-color;
@include animate-hover(all, 250ms);
&:before{
content:"#";
position: relative;
}
&:hover{
border: none;
color:#000;
}
}
}
}
// Latest projects widget.
.acora-projects-widget{
margin-bottom: 52px;
.widget-title{
margin-bottom: 21px;
}
}
// Calendar widget.
#wp-calendar {
border-collapse: collapse;
width: 100%;
caption{
margin-bottom: 10px;
}
}
#wp-calendar td,
#wp-calendar th {
font: 14px $body-font;
border: 1px solid $lines-color-dark;
padding: 8px;
text-align: center;
}
#wp-calendar th {
font-weight: 700;
padding-top: 12px;
padding-bottom: 12px;
}
.widget_recent_entries .post-date{
font-size:12px;
color:#BBB;
white-space:nowrap;
display:block;
}
// Latest projects widget.
.acora-widget-igp{
width: 100%;
height: 280px;
}
.latest-projects-widget{
margin-bottom: 17px;
}
// Text widget.
.widget_text{
p{
font: 14px $body-font;
line-height: 1.8;
}
strong + br + img{
margin-top: 10px;
}
br ~ img {
margin-bottom: 5px;
}
.wp-caption{
margin-top: 10px;
p{
margin-top:10px;
}
}
select{
margin-bottom: 7px;
}
}
// Gallery widget.
.widget_media_gallery{
a{
width: 100%;
border: none;
&:hover{
border: none;
};
}
}
// Profile widget.
.profile-widget{
display:block;
width:100%;
overflow:hidden;
.profile-picture{
width:200px;
height:200px;
overflow:hidden;
border-radius:50%;
margin:0 0 5px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.profile-username{
margin: 26px 0 10px 0 !important;
}
.profile-description{
font-size: 15px;
}
.icons-wrapper{
margin-left: -8px;
a{
display:inline-block;
border:none;
margin-top:10px !important;
padding:6px 9px 4px;
margin-left:-4px;
background-image: none;
background: transparent;
color:#999;
&:hover,
&:focus{
color: $main-color;
}
span{
font-size: 16px;
}
}
}
}
/**
* 5. NAVIGATION
* ------------------------------------------------------------------------------
**/
// Blog navigation with paging.
//--------------------------------------------------------------------------------
.navigation-paging{
overflow:visible;
position:relative;
width:100%;
height:100%;
white-space:normal;
border-top: 1px solid $lines-color-dark;
margin: 112px 0 0 0;
padding: 30px 0 0 0;
.button-older,
.button-newer{
width: 50px;
height: 50px;
margin-top: 10px;
padding: 0 !important;
&:before{
font-size: 22px !important;
left: 14px !important;
top: 14px !important;
}
}
.button-newer{
margin-right: 48px;
}
.paging{
overflow:hidden;
width: 100%;
font-size:13px;
line-height: 0;
.wrap-page-numbers{
vertical-align: top;
margin-right: 22px;
}
.page-numbers{
font: 700 14px $body-font;
display:inline-block;
border:solid 1px $lines-color-dark;
width:50px;
text-decoration:none;
text-align:center;
margin-top: 10px;
padding:15px 0 16px;
color: #999999;
}
.page-numbers{
margin-right: 26px;
}
a:hover{
border-color: #000;
background: $button-hover-color;
color: #FFF;
}
.current{
cursor:default;
border-color: #000;
background: $button-hover-color;
color: #FFF;
}
}
.wrap-page-numbers{
display: inline-block;
}
}
// Blog post single previous/next navigation.
.post-navigation{
float:right;
width:auto;
.nav-previous{
float:right;
margin:0 0 0 10px;
}
.nav-next{
float:right;
margin:0;
}
}
// Blog post tags navigation.
.entry-navigation{
overflow:hidden;
margin:40px 20px 0;
.entry-tags{
float:left;
}
h3{
color:#111;
font-size:13px;
//line-height:1em;
margin:0;
font-weight:700;
text-transform:uppercase;
}
.post-navigation{
.nav-portfolio{
float:right;
padding: 15px 38px 16px 64px;
&:before{
left: 38px;
}
}
.nav-next{
margin-bottom: 0;
}
}
}
// Related posts.
.related-posts{
margin: 97px 20px 0;
.title{
position: relative;
font-size: 33px;
padding-left: 15px;
margin-bottom: 29px !important;
&:before{
content: "";
position: absolute;
width: 6px;
height: 27px;
top: 2px;
left: 0;
background:$main-color;
};
}
#acora_grid{
margin-bottom: -9px;
}
.background{
background: #2a2a2a;
}
.PGThumbnailOverlay{
background: #000;
}
.extra-content{
font: 700 18px $header-font;
text-transform: uppercase;
line-height: 27px;
margin-top: 20px;
padding: 0;
}
.extra-text-normal{
color: #FFF !important;
}
.extra-text-selected{
color: $main-color !important;
}
.title-preview{
display: inline-block !important;
}
.in{
display: block;
cursor: pointer;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
border: solid 1px #FFF !important;
padding: 19px 50px !important;
color: #FFF;
transition: all 250ms ease-out;
&:hover{
background: #FFF;
color: #000;
transition: all 250ms ease-out;
}
}
}
/**
* --------------------------------------------------------------------------------
* 12. COMMENTS
* --------------------------------------------------------------------------------
*/
#comments{
font-family: $body-font;
border-top: 1px solid #D9D9D9;
clear: both;
margin: 100px 20px 0;
padding-top: 78px;
.title{
position: relative;
margin-bottom: 0;
padding-left: 15px;
margin: 20px 0 -9px 0;
&:before{
content: "";
position: absolute;
width: 6px;
height: 27px;
top: 2px;
left: 0;
background:$main-color;
};
}
p{
line-height: 1.8;
}
ul,ol{
list-style:none;
}
textarea,
input,
p,
ul,
ol,
a,
li{
font-family: $body-font !important;
}
input[type="text"],
input[type="email"],
input[type="url"],
textarea{
background: $images-background-color-dark;
color: #999;
&:hover{
border-color: #222 !important;
color: #FFF !important;
}
&:focus{
color: #FFF !important;
border-color: #222 !important;
}
}
.wrap-avatar{
width: 100px;
height: 100px;
position: absolute;
margin: 0 15px 0 0;
img{
width: 100px;
height: 100px;
}
}
.wrap-avatar .avatar{
border-radius:60px;
}
.wrap-avatar .avatar-128{
display:none;
}
.comment-author-info{
position:relative;
padding:0 0 0 130px;
}
.comment-author{
width:100%;
padding: 0;
}
.bypostauthor .bypostauthor-icon{
position: relative;
top: -5px;
font: italic 700 10px $header-font;
white-space: nowrap;
text-transform: uppercase;
padding: 3px 7px 2px 7px;
color: $main-color;
&:before{
content: '';
width: 1px;
height: 9px;
top: 2px;
left: 2px;
background: #999;
position: absolute;
}
}
.comment footer em{
font-style:normal;
font-style:normal;
font-size:13px;
color:#999;
border:1px solid #eaeaea;
padding: 5px 10px;
}
.comment-author .fn{
font: 700 18px $header-font;
font-style: normal;
text-transform: uppercase;
display: block;
float: left;
margin: 0 10px 1px 0;
color: #FFF;
a{
&:hover,
&:focus{
color: #666;
};
}
}
.comment-meta{
.comment-time{
font-style: italic;
font-size: 12px;
}
}
.comment-meta a{
float:left;
white-space: nowrap;
color:#999;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
text-decoration: none;
background-image: linear-gradient(#FFF calc(100% - 1px), #FFF 1px);
background-position: 0 calc(100% + 1px);
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out;
&:hover{
color:#FFF;
background-size: 100% 1px;
};
}
.comment-time{
clear:both;
display:block;
}
.comment-actions{
overflow:visible !important;
clear:both;
position: relative;
top: 2px;
overflow:hidden;
margin:10px 0 0;
}
.comment-actions{
a,
.comment-reply-link{
text-transform: uppercase;
font: 700 12px $body-font;
display: block;
border: none;
margin: 9px 10px 30px 0;
padding: 5px 20px;
background: $main-color;
color: #FFF;
}
.comment-edit-link{
border: 1px solid #222;
background: transparent;
color: #FFF;
padding: 4px 20px;
}
}
.comment-edit-link{
background: transparent;
border: 1px solid $lines-color-dark;
padding: 3px 20px 4px;
color: #000;
&:hover{
border-color: #000;
background: #000;
color: #FFF !important;
};
}
.comment-actions a:hover{
background: $button-hover-color-dark;
color: #000 !important;
}
.comment-content{
clear: both;
font-size: 15px;
margin: 25px 0 0 130px;
p{
font-size: 14px;
line-height: 1.8;
}
a{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
color: #DDD;
&:hover{
color: #FFF;
}
}
}
li.comment{
padding: 53px 0 0 0;
.comment-article{
padding-bottom:0;
}
}
.children{
margin:0;
padding: 0;
.comment{
padding-bottom:0;
}
.comment-article{
padding:0 0 0 20px !important;
border-left: 1px solid $lines-color-dark;
}
.bypostauthor-icon{
margin-right: -40px;
}
.depth-2 .comment-article{
margin-left: 40px;
}
.depth-3 .comment-article{
margin-left: 80px;
}
.depth-4 .comment-article{
margin-left: 120px;
}
.depth-5 .comment-article{
margin-left: 160px;
}
}
.depth-3{
.bypostauthor-icon{
margin-right: -60px;
}
}
.depth-4{
.bypostauthor-icon{
margin-right: -80px;
}
}
.form-allowed-tags{
font-size:12px;
color:#666;
padding:10px 10px 10px 0;
}
.form-allowed-tags code{
font-size:11px;
}
.commentlist{
margin-bottom: -3px;
.comment-respond{
border: 1px solid $lines-color-dark;
padding: 100px !important;
margin: 40px 0 0 0 !important;
}
.pingback{
margin-top: 39px;
& > p{
font: 700 18px $header-font;
font-style: normal;
text-transform: uppercase;
margin-bottom: 8px;
color: #FFF !important;
}
.comment-edit-link{
display: inline-block !important;
text-transform: uppercase ;
border: 1px solid #222 !important;
font: 700 12px Open Sans, arial, sans-serif;
display: block;
border: none;
margin: 9px 10px 30px 0;
padding: 5px 20px;
color: #FFF !important;
&:hover{
background: #FFF !important;
color: #000 !important;
}
}
}
}
}
.logged-in-as{
margin:0 0 30px 0 !important;
a{
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: #999;
&:hover{
color: #FFF;
}
}
a:last-child{
margin-left: 10px;
}
}
#respond{
padding:0;
background:#f9f9f9;
p{
margin:0 0 19px;
overflow:hidden;
color: #999;
}
.required{
font-size:10px;
color:#f00;
font-weight:700;
//line-height:1;
}
.form-submit{
margin: -71px 0 0 0 !important;
input{
font-size: 14px;
font-weight: 700;
display:inline-block;
letter-spacing: 0.03em;
float:right;
border:none;
margin:0;
padding: 19px 50px;
color: #FFF;
}
}
.comment-form-cookies-consent + .form-submit{
margin-top: -86px !important;
}
.submit,
#cancel-comment-reply-link{
display:block;
text-transform: uppercase;
font-family: $body-font;
font-size:12px;
padding:7px 9px 8px;
background:$main-color;
color:#000;
@include animate-hover(all, 250ms);
&:hover{
background:#FFF;
color:#000 !important;
}
}
#cancel-comment-reply-link{
padding:5px 9px;
}
}
.comment-respond{
margin: 76px 0 0 0;
padding: 0;
background: transparent !important;
.comment-notes{
font: italic 12px $body-font;
margin: 0 0 20px 0 !important;
}
textarea{
font-family: $body-font;
font-size:14px;
padding: 6px 10px;
}
label{
font-size:12px;
font-weight: 700;
text-transform: uppercase;
display: block;
width: 140px;
padding: 4px 0 5px 0;
color: $button-hover-color-dark;
}
.comment-form-cookies-consent{
input{
vertical-align: top;
}
label{
display: inline-block;
vertical-align: top;
width: calc(100% - 230px);
transform: translate(10px, -6px);
}
}
.comment-form-comment{
overflow:visible !important;
margin-left:52.5% !important;
textarea{
box-sizing:border-box;
border: 1px solid $lines-color-dark;
font-size: 14px;
display:inline-block;
overflow:visible;
letter-spacing: 0.03em;
width:100% !important;
height: 167px;
padding: 17px 22px;
background: #1A1A1A;
color: #999;
}
}
.logged-in-as{
& + p{
margin-left: 0 !important;
}
}
.comment-form-author{
margin-top: -213px !important;
}
.comment-form-author,
.comment-form-email,
.comment-form-url{
overflow:visible !important;
//margin:-225px 0 0 0 !important;
input{
font-family: $body-font;
box-sizing: border-box;
display:inline-block;
border: 1px solid $lines-color-dark;
font-size: 14px;
letter-spacing: 0.03em;
width:48% !important;
padding: 17px 22px;
}
}
}
#respond{
.logged-in-as ~ .form-submit{
margin-top: 30px !important;
}
}
#cancel-comment-reply-link{
margin:0;
padding:4px 9px 5px;
}
#respond{
.logged-in-as ~ .form-submit{
margin-top: 30px !important;
}
}
#cancel-comment-reply-link{
margin:0;
padding:4px 9px 5px;
}
#reply-title{
position: relative;
font: 700 33px $header-font;
text-transform: uppercase;
text-align: left;
position: relative;
display: inline-block;
margin: 20px 0 10px 0;
padding-left: 15px;
&:before{
content: "";
position: absolute;
width: 6px;
height: 27px;
top: -1px;
left: 0;
background: $main-color;
}
}
#reply-title small{
position: relative;
top: 0;
margin-left: 20px;
float: right;
font-size: 1em;
a{
color: #FFF !important;
}
}
.comment-navigation{
overflow:hidden;
padding: 60px 0 0;
.assistive-text{
display:none;
}
a{
float:left;
}
}
.nocomments{
display: none;
}
/**
* --------------------------------------------------------------------------------
* 13. COMPONENETS
* --------------------------------------------------------------------------------
*/
//Default button.
.button[class^="fwdicon-"]:before,
.button[class*=" fwdicon-"]:before{
margin-right:5px;
}
// Button light.
.button-light,
.post-edit-link,
.wp-block-button__link,
.entry-content .button-light,
.post-password-form input[type="submit"],
.widget .button-light,
.edit-button-holder .post-edit-link{
overflow: visible;
font:700 14px $body-font;
display:inline-block;
backface-visibility: hidden;
text-transform:uppercase;
text-decoration:none;
border: 1px solid #222;
cursor:pointer;
padding:14px 38px 15px;
color:#FFF;
transition: background-color 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out;
}
.post-edit-link{
padding:15px 38px 16px !important;
}
// Edit button.
.post-edit-link{
position:relative;
z-index:100;
&:hover{
border-color: #FFF;
background: #FFF;
color: #000;
}
}
.post-password-form input[type="submit"]{
color:#000;
}
.button-light:hover,
.entry-content .button-light:hover,
.widget .button-light:hover,
.post-password-form input[type="submit"]:hover{
background: $button-hover-color-dark;
color: #000;
}
.button-disabled,
.entry-content .button-disabled{
cursor:default;
color:#222;
border-color:#222;
transition: none;
}
.button-disabled:before{
color:#222 !important;
}
.button-disabled:hover,
.entry-content .button-disabled:hover,
.button-disabled:hover:before{
color:#222 !important;
background: #111113;
}
.button-light.button-fwdicon-left{
position:relative;
padding:15px 39px 16px 56px;
}
.button-light.button-fwdicon-left:before{
position:absolute;
left:34px;
top:17px;
font-size:16px;
}
.button-light.button-fwdicon-right{
position:relative;
padding:15px 56px 16px 39px;
}
.button-light.button-fwdicon-right:before{
position: absolute;
right: 34px;
top: 17px;
font-size: 16px;
}
/**
* --------------------------------------------------------------------------------
* 14. SHORTCODES
* --------------------------------------------------------------------------------
*/
// Tabs.
.tabs {
margin: 0 0 40px 0;
.tabs-menu{
ul{
list-style: none;
overflow: hidden;
margin: 0 !important;
li:last-child{
a{
border-right: 1px solid $lines-color-dark;
}
};
}
li{
display: block;
float: left;
padding: 0;
margin:0 !important;
z-index: 1;
position: relative;
a{
display: block;
text-transform: uppercase;
text-decoration: none;
font: 700 16px $header-font;
border-bottom:none !important;
border: 1px solid $lines-color-dark;
border-right: none;
padding: 21px 30px 16px;
color: #FFF;
b{
display: none;
}
&:hover {
background: $input-background-color-dark !important;
color: #FFF;
}
}
&.active a{
cursor: default;
position: relative;
background: $input-background-color-dark !important;
color: #FFF;
}
}
}
.tab {
display: none;
border: 1px solid $lines-color-dark;
padding: 34px 29px 7px;
line-height:1.6;
position: relative;
p{
line-height: 1.8;
}
}
.tab-index-1 {
display: block;
}
}
// Accordion.
.accordion {
margin-bottom: 40px;
.panel{
margin-bottom: 40px;
}
.panel-content{
display: none;
}
.panel-active{
.panel-content {
display: block;
}
}
.panel-title {
border: 1px solid $lines-color-dark;
margin: 0 !important;
padding: 0 !important;
a{
position: relative;
font: 700 16px $header-font;
display:block;
text-transform: uppercase;
text-decoration: none;
border: none;
padding: 21px 30px 16px;
background: transparent;
color: #FFF;
&:hover {
background: $images-background-color-dark !important;
color: #FFF;
}
&:after{
position: absolute;
content: '\e935';
font-family:'fwdicon';
font-size: 15px;
right:30px;
color: #999;
@include animate-hover(color, 250ms);
}
&:hover:after{
color: #FFF;
}
}
}
.panel-active{
.panel-title{
border-bottom: none !important;
background: $images-background-color-dark;
a{
border-bottom: none !important;
background: transparent !important;
color: #FFF;
&:after{
content: '\e917';
font-family:'fwdicon';
}
}
}
}
.panel-content{
position:relative;
border: 1px solid $lines-color-dark;
padding: 34px 29px 7px !important;
}
}
.fwdicon-settings:before{
}
.color-style{
position: fixed;
overflow: hidden;
left: 60px;
bottom: 20px;
z-index: 999;
.holder{
position: relative;
}
span{
display: inline-block;
text-transform: uppercase;
line-height: 0;
font-weight: bold;
cursor: pointer;
padding: 20px 30px 20px 30px;
@include animate-hover(all, 300ms);
&.dark{
background: #000;
color: #999;
&:hover{
color: #FFF;
}
}
&.white{
background: #FFF;
color: #999;
&:hover{
color: #000;
}
}
}
}
.color-style-disabled{
cursor: default;
transform: scale(.8);
&.white,
&.dark{
&:hover{
color: #999 !important;
}
}
}
.accent-colors-holder{
position: fixed;
overflow: hidden;
left: 20px;
bottom: 20px;
z-index: 999;
.color-boxes{
cursor: pointer;
position: relative;
}
.settings-button{
.table-cell,
.table{
width: 40px;
height: 40px;
}
position: relative;
cursor: pointer;
width: 40px !important;
height: 40px !important;
z-index: 10;
padding: 4px 0 0;
text-align: center;
background:#FFF;
color:#000;
@include animate-hover(all, 250ms);
&:hover{
background: #000;
color: #FFF;
};
.table-cell:before{
display: inline-block;
font-size: 19px;
animation:spin 4s linear infinite;
}
}
@-moz-document url-prefix() {
.settings-button{
padding-top: 0;
}
}
@supports (-ms-ime-align:auto) {
&.alignfull{
padding: 0 10px 0 25px;
}
}
.color-box{
width: 40px;
height: 40px;
@include animate-motion(all, .3s);
}
}
@keyframes spin { 100% {transform:rotate(360deg); } }
/**
* --------------------------------------------------------------------------------
* 15. NO RESULTS PAGE
* --------------------------------------------------------------------------------
*/
.no-results{
.entry-header{
margin-top: 97px;
h1{
font-size: 64px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 18px 44px 0;
color: #000;
}
}
.entry-content{
.button-light{
border: none;
margin-top: 95px;
background: $main-color;
color: #FFF;
&:hover{
background: #000;
color: #FFF
}
}
}
}
/**
* --------------------------------------------------------------------------------
* 16. ACCESSIBILITY
* --------------------------------------------------------------------------------
*/
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/**
* Import at bottom
* --------------------------------------------------------------------------------
*/
@import 'base/_responsive'; //responsive