/*--------------------------------------------------*/ /* MAIN LAYOUT */ /*--------------------------------------------------*/ /*--------------------------------------------------*/ /* HEADER */ /*--------------------------------------------------*/ .site-header{ .header-top{ padding: 60px 78px 41px 78px; } .header-social{ margin-top: -9px; li{ display: inline-block; padding: 0 6px; a{ color: $dark-gray; font-size: 16px; @extend .wpc-trans; &:hover{ color: $pink; } } } } .site-branding{ .site-title{ text-align: center; } a{ color: $dark-gray; font-family: Mistral; font-size: 85px; font-weight: 400; } } .header-options{ float: right; .fa{ margin-right: 22px; color: $dark-gray; font-size: 16px; font-weight: 400; text-transform: uppercase; @extend .wpc-trans; &:hover{ color: $pink; } } } .second-menu-icon{ margin-top: -2px; display: inline-block; width: 19px; height: 32px; cursor: pointer; vertical-align: top; &:hover{ i, i:after, i:before{ background: $pink; } } } .second-menu-icon i{ transition: all 0.4s ease-out; } /* Don`t reqiured */ .wpc-navigation.active .second-menu-icon i{ background: none; } .wpc-navigation.active .second-menu-icon i:before{ top: 0; transform: rotate(45deg); } .wpc-navigation.active .second-menu-icon i:after{ top: 0; transform: rotate(135deg); } /* End Don`t reqiured */ .second-menu-icon i:before, .second-menu-icon i:after { content: ''; width: 19px; height: 2px; background: $dark-gray; position: absolute; left: 0; transition: all 0.4s ease-out; } .second-menu-icon i:before { top: -6px; } .second-menu-icon i:after { bottom: -6px; } .second-menu-icon i { position: relative; display: inline-block; width: 19px; height: 2px; background-color: $dark-gray; } } .wpc-navigation { min-height: 50px; position: relative; padding-top: 26px; border-top: 1px solid #eeeded; transition: all ease .4s; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); } .wpc-navigation.sticky{ position: fixed; top: 0; left: 0; right: 0; padding-top: 14px; background: #fff; z-index: 10; border-bottom: 1px solid #eeeded; .main-menu>li{ padding-bottom: 21px; } &.active{ .main-menu>li{ padding-bottom: 5px; } } } .main-menu{ padding: 0 10px; margin: 0; text-align: center; transition: all ease-out .4s; } .main-menu li{ display: inline-block; position: relative; } .main-menu>li{ margin-right: 0; padding-right: 0; padding-bottom: 29px; } .main-menu>li>a{ display: inline-block; padding: 0 26px 0; } .main-menu>li:not(:last-child)>a{ border-right: 1px solid #eaeaeb; } .main-menu .sub-menu{ display: none; padding: 0; position: absolute; white-space: nowrap; z-index: 10; text-align: left; } .main-menu .sub-menu a{ padding: 10px 15px; } .main-menu a{ display: inline-block; color: $dark-gray; font-size: 12px; font-weight: 600; letter-spacing: .6px; @extend .font-1; @extend .wpc-trans; &:hover{ color: $pink; } } /* Active menu items */ .main-menu .current-menu-parent>a, .main-menu .current-menu-item>a, .main-menu .current_page_item>a, .main-menu .current-menu-ancestor>a{ color: $pink!important; } /* Show second and third menu levels */ @media screen and (min-width:768px) { .main-menu .sub-menu{ top: 43px; background: $dark-gray; padding: 10px 0; } .main-menu .sub-menu a{ color: #fff; padding: 12px 28px; display: block; &:hover{ color: $pink; } } .wpc-navigation.sticky .main-menu > .menu-item > .sub-menu{ top: 35px; } .main-menu .sub-menu li{ display: block; } .main-menu li:hover > .sub-menu{ display: block; } .main-menu .sub-menu .sub-menu{ position: absolute; left: 100%; top: 0; } /* First level menu arrows */ .main-menu > .menu-item-has-children > a:after { display: none; content: '\f107'; font-family: 'FontAwesome'; } /* Second level menu arrows */ .main-menu .sub-menu .menu-item-has-children > a:after{ content: '\f105'; font-family:'FontAwesome'; margin-left: 10px; } } /* Responsive menu button */ .nav-menu-icon { position: absolute; right: 15px; top: 13px; width: 32px; height: 32px; display: none; cursor: pointer; } /* Don`t reqiured */ .wpc-navigation.active .nav-menu-icon i{ background: none; } .wpc-navigation.active .nav-menu-icon i{ height: 32px; width: 32px; } .wpc-navigation.active .nav-menu-icon i:before, .wpc-navigation.active .nav-menu-icon i:after{ width: 32px; height: 2px; border-radius: 0; } .wpc-navigation.active .nav-menu-icon i:before{ top: 12px; transform: rotate(45deg); } .wpc-navigation.active .nav-menu-icon i:after{ top: 12px; transform: rotate(135deg); } /* End Don`t reqiured */ .nav-menu-icon i:before, .nav-menu-icon i:after { content: ''; border-radius: 50%; width: 4px; height: 4px; background: #000; position: absolute; left: 0; transition: all 0.15s ease-out; } .nav-menu-icon i:before { top: -10px; } .nav-menu-icon i:after { bottom: -10px; } .nav-menu-icon i { position: relative; display: inline-block; width: 4px; border-radius: 50%; height: 4px; background: #000; z-index: 11; } .menu-item-has-children > a span{ display: none; } /* Responsive menu */ @media screen and (max-width:767px) { .nav-menu-icon { display: block; text-align: right; } .main-menu { position: fixed; padding: 25px 0; transform: translateX(-100%); top: 0; bottom: 0; width: 100%; z-index: 10; overflow-y: auto; background: #fff; } .wpc-navigation.active .main-menu{ transform: translateX(0); } .wpc-navigation.active{ .nav-menu-icon{ position: fixed; top: 15px; right: 15px; z-index: 11; } } .main-menu li{ display: block; } .main-menu>li{ padding: 5px 0; } .main-menu > li > a { display: inline-block; padding: 0 5px 0; } .main-menu .sub-menu{ position: static; padding: 5px 15px; text-align: center; } .menu-item-has-children > a span{ display: inline-block; transform: translateX(5px); } .menu-item-has-children.active > .sub-menu{ display: block; position: static; } .main-menu > li:not(:last-child) > a { border-right: none; } } /*----------------------------------------------------------------------*/ /* SWIPER */ /*----------------------------------------------------------------------*/ .swiper-container {margin:0 auto;position:relative;overflow:hidden;direction:ltr;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;height: inherit;} .swiper-wrapper {position:relative;width:100%;-webkit-transition-property:-webkit-transform, left, top;-webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform, left, top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform, left, top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform, left, top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform, left, top;transition-duration:0s; transform:translate3d(0px,0,0);transition-timing-function:ease;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;cursor:ew-resize;margin: 0 auto;height: inherit;float: left;} .swiper-free-mode > .swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto;} .swiper-slide {float: left; height: inherit; position: relative;} .swiper-wp8-horizontal {-ms-touch-action: pan-y;} .swiper-wp8-vertical {-ms-touch-action: pan-x;} .pagination {position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center;} .swiper-pagination-switch {position: relative; display: inline-block; float: none; cursor: pointer; transition:all .35s ease-out;-webkit-transition:all .35s ease-out;-moz-transition:all .35s ease-out;-ms-transition:all .35s ease-out;} .point-style-1{ display: none; } .point-style-1 .swiper-pagination-switch {width: 9px; height: 9px; background: #908a8a; margin: 0px 2px 0px 0} .point-style-1 .swiper-pagination-switch.swiper-active-switch { background: red;} .point-style-1.type-2 .swiper-pagination-switch{ border-radius: 50%; width: 8px; height: 8px; } /*----------------------------------------------------------------------*/ /* HEADINGS */ /*----------------------------------------------------------------------*/ .c-heading{ position: relative; text-align: center; &:after{ content: ""; position: absolute; left: 0; top: 50%; margin-top: 1px; width: 100%; border-bottom: 1px dashed #e8e8e8; z-index: 1; } span{ position: relative; padding: 0 20px; background: #fff; display: inline-block; font-size: 20px; font-weight: 400; z-index: 2; } } /*----------------------------------------------------------------------*/ /* SLIDERS */ /*----------------------------------------------------------------------*/ .wpc-main-slider{ .swiper-arrow-left, .swiper-arrow-right{ position: absolute; width: 50px; height: 50px; top: 50%; background-color: rgba(255, 255, 255, 0.1); border: 2px solid white; color: #fff; text-align: center; line-height: 46px; font-size: 24px; font-weight: 400; border-radius: 50%; cursor: pointer; transform: translateY(-50%); @extend .wpc-trans; &:hover{ color: #cdced0; background-color: rgba(255, 255, 255, 1); } } .swiper-arrow-left{ left: 50px; text-indent: -3px; } .swiper-arrow-right{ right: 50px; text-indent: 3px; } } /*----------------------------------------------------------------------*/ /* BANNERS */ /*----------------------------------------------------------------------*/ .wpc-main-slider{ .wpc-banner{ min-height: 500px; } } .c-page-banner{ &.rendered{ padding: 167px 15px; } text-align: center; .banner-title{ font-size: 30px; color: #fff; } } /*----------------------------------------------------------------------*/ /* BLOG */ /*----------------------------------------------------------------------*/ .c-post{ background: #fff; box-shadow: 0 2px 5px rgba(91, 81, 73, 0.08); /* post header */ .entry-header{ text-align: center; .entry-category{ a{ padding-bottom: 3px; border-bottom: 1px solid $pink; font-size: 10px; font-weight: 400; text-transform: uppercase; color: $pink; letter-spacing: 1.6px; @extend .font-1; @extend .wpc-trans; &:hover{ color: $dark-gray; border-bottom: 1px solid $dark-gray; } } } .entry-title{ display: block; a{ color: $dark-gray; font-size: 20px; font-weight: 400; @extend .font-2; @extend .wpc-trans; &:hover{ color: $pink; } } } } /* post img */ .post-img-link{ display: block; min-height: 242px; position: relative; overflow: hidden; &:hover{ .post-img-like{ opacity: 1; transform: translateX(0); } } .post-img-like{ position: absolute; left: 30px; bottom: 30px; padding: 0 5px; color: #fff; opacity: 0; transform: translateX(-100%); background-color: rgba(0, 0, 0, 0.39); border-radius: 4px; z-index: 1; @extend .wpc-trans; .like-quantity{ font-size: 10px; font-weight: 700; line-height: 24px; } .fa{ margin-right: 5px; font-size: 13px; font-weight: 400; line-height: 24px; @extend .wpc-trans; &:hover{ color: $pink; } } } } /* post content */ .entry-content{ color: $light-gray; font-size: 14px; font-weight: 400; line-height: 24px; overflow: hidden; h1,h2,h3,h4,h5,h6{ margin-top: 20px; margin-bottom: 20px; font-weight: 400; color: $dark-gray; } h2{ margin-top: 35px; margin-bottom: 23px; font-size: 24px; font-weight: 400; } .more-link{ color: $pink; font-size: 14px; font-style: italic; line-height: 25px; @extend .font-2; @extend .wpc-trans; &:hover{ color: $dark-gray; } } blockquote{ margin-top: 39px; color: #8a8b8e; @extend .font-2; font-size: 18px; font-style: italic; line-height: 30px; &:before{ content: "“"; float: left; position: relative; top: 15px; left: 7px; color: #cdced0; font-family: Georgia; font-size: 68px; font-weight: 400; line-height: 24px; } p{ padding-left: 33px; overflow: hidden; } } cite{ display: block; margin-top: 15px; margin-bottom: 38px; padding-left: 60px; color: $dark-gray; @extend .font-2; font-size: 16px; font-weight: 700; line-height: 24px; } } /* post footer */ .entry-footer{ a{ @extend .wpc-trans; &:hover{ color: $pink; time{ color: $pink; } } } a, time, i{ color: #b0b1b2; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.6px; } .entry-footer-top{ padding-left: 7px; padding-bottom: 51px; .fa{ padding-right: 13px; font-size: 14px; font-weight: 400; line-height: 24px; color: $dark-gray; } .tags-links{ display: inline-block; a{ display: inline-block; margin-right: 6px; padding: 0 13px; color: $light-gray-2; font-size: 10px; font-weight: 700; line-height: 26px; text-transform: uppercase; background-color: #f2f3f5; @extend .wpc-trans; &:hover{ color: pink; } } } } .share-links{ position: relative; &:hover{ >span{ visibility: hidden; } .c-share-list{ opacity: 1; transform: translate(-50%, 0) scale(1); } } } /* share links */ .share-links .c-share-list{ position: absolute; top: -3px; height: 100%; left: 50%; text-align: center; background: #fff; opacity: 0; transform: translate(-50%, -5px) scale(0); transition: all ease-in-out .2s; z-index: 5; li{ display: inline-block; } a{ padding: 0 5px; color: $dark-gray; font-size: 14px; font-weight: 400; line-height: 24px; background: #fff; @extend .wpc-trans; &:hover{ color: $pink; } } } .post-likes{ display: inline-block; margin-left: 30px; .like-btn:before{ content: "\f08a"; font-family: FontAwesome; font-style: normal; font-weight: normal; padding-right: 6px; color: $pink; font-size: 18px; font-weight: 400; line-height: 24px; vertical-align: middle; } .like-btn.active:before{ content: "\f004"; } .likes-amount{ display: inline-block; color: $light-gray-2; font-size: 10px; font-weight: 700; line-height: 24px; transform: translateY(-1px); } } } } /* big post */ .c-post.c-big-post{ .entry-header{ padding: 33px 30px 35px; .entry-category{ } .entry-title{ margin-top: 19px; position: relative; &:after{ content: ""; position: absolute; left: 0; top: 50%; margin-top: 1px; width: 100%; border-bottom: 1px dashed #e8e8e8; z-index: 1; } a, span{ position: relative; padding: 0 20px; background: #fff; display: inline-block; font-size: 24px; z-index: 2; } } } .entry-content{ padding: 34px 30px 43px; p:not(:last-child){ margin-bottom: 20px; } .more-wrap{ text-align: center; .more-link{ display: inline-block; margin-top: 10px; border-bottom: 2px solid #eeeeee; } } } .entry-footer{ padding: 0 30px 38px; &:before{ content: ""; display: block; margin-bottom: 23px; border-bottom: 1px dashed #e8e8e8; } .entry-footer-bottom{ .footer-elems{ float: left; width: 33.333%; text-align: center; vertical-align: middle; a,time{ position: relative; top: -1px; } &:not(:last-child){ border-right: 1px solid #e8e8e8; } } } .share-links .c-share-list{ width: 100%; } } } /* small post */ .c-small-post{ padding-bottom: 39px; .entry-header{ padding: 26px 10px 20px; .entry-title{ margin-top: 20px; } } .entry-content{ padding: 0 30px; } .entry-footer{ margin-top: 24px; padding: 0 30px; .share-links{ display: block; text-align: center; &:after{ content: ""; position: absolute; left: 0; top: 50%; margin-top: 1px; width: 100%; border-bottom: 1px dashed #e8e8e8; z-index: 1; } a, i{ position: relative; padding: 0 20px; z-index: 2; background: #fff; display: inline-block; } } } } .c-post.c-single-post{ .entry-content{ padding: 48px 35px 31px; color: #4f4c4d; font-size: 14px; font-weight: 400; line-height: 24px; } .entry-footer{ padding: 0 30px 36px; &:before{ content: ""; display: none; } } .entry-footer-bottom{ &:before{ content: ""; display: block; margin-bottom: 23px; border-bottom: 1px dashed #e8e8e8; } } .post-img-link.popup-img{ @extend .wpc-trans; background-size: 100%; &:hover{ background-size: 105%; } } } /* post author */ .c-post-author{ padding: 36px 36px 44px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .author-image{ float: left; border-radius: 50%; } .author-info{ margin-top: 1px; padding-left: 36px; overflow: hidden; } .author-name{ color: $dark-gray; font-size: 16px; font-weight: 700; line-height: 24px; @extend .font-1; } .author-desc{ margin-top: 8px; color: #4f4c4d; font-size: 14px; font-weight: 400; line-height: 24px; } ul{ margin-top: 15px; li{ margin-right: 9px; display: inline-block; } a{ color: #c0c2c5; font-size: 14px; font-weight: 400; line-height: 24px; @extend .wpc-trans; &:hover{ color: $pink; } } } } /*----------------------------------------------------------------------*/ /* FEATURD POST */ /*----------------------------------------------------------------------*/ .c-featured-post{ position: relative; padding: 42px 0 36px; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.05); background: #fff; text-align: center; .featured-post-title{ a{ color: $dark-gray; font-size: 16px; font-weight: 400; @extend .wpc-trans; } } .featured-post-subtitle{ margin-top: 10px; color: #b0b1b2; font-size: 14px; font-style: italic; } &.style-2:after{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 59px; background-color: #eaeaeb; } &:before{ content: ""; position: absolute; display: none; top: -10px; left: 50%; transform: translateX(-50%); width: 0; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; } &:hover{ cursor: pointer; .featured-post-title a{ color: $pink; } } &.active{ .featured-post-title{ a{ color: $pink; } } } &.active:before{ display: block; } } .c-posts-offers{ padding: 37px 37px 49px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .c-offers-post{ margin-top: 36px; text-align: center; a{ display: block; } .offers-post-img{ overflow: hidden; } .post-img-link{ min-height: 240px; background-size: cover; transition: all ease-in .2s; &:hover{ transform: scale(1.1); } } .entry-header{ margin-top: 27px; } .entry-title a{ color: $dark-gray; font-size: 14px; font-weight: 400; @extend .wpc-trans; &:hover{ color: $pink; } } .posted-on{ display: block; margin-top: 8px; } time{ color: #bbb; font-size: 12px; font-weight: 400; } &.size-2{ .post-img-link{ min-height: 158px; } } } } /*----------------------------------------------------------------------*/ /* COMMENTS */ /*----------------------------------------------------------------------*/ .c-post-comments{ padding: 37px 35px 53px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .c-comment-list{ li.depth-2{ padding-left: 70px; } li.depth-3{ padding-left: 140px; } li.depth-4{ padding-left: 210px; } } .c-comment-body{ margin-top: 37px; position: relative; padding-bottom: 38px; border-bottom: 1px dashed #e8e8e8; } .comment-author{ img{ float: left; margin-right: 36px; height: 70px; width: 70px; border-radius: 50%; } a{ color: $dark-gray; font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 1.6px; @extend .wpc-trans; &:hover{ color: $pink; } } } .comment-metadata{ margin-top: 4px; time{ color: #bbb; font-size: 12px; font-weight: 400; } } .comment-text{ margin-top: 11px; overflow: hidden; color: #4f4c4d; font-size: 14px; font-weight: 400; line-height: 24px; } .reply{ position: absolute; top: 0; right: 0; a{ color: $light-gray-2; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.4px; @extend .wpc-trans; &:hover{ color: $pink; } } } } /*----------------------------------------------------------------------*/ /* REPLY FORM */ /*----------------------------------------------------------------------*/ .c-reply-form{ padding: 37px 35px 50px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .c-comment-form{ margin-top: 36px; } .c-form-inp{ input, textarea{ width: 100%; padding: 0 15px; background-color: white; border: 1px solid #e4e5e9; border-radius: 3px; color: $dark-gray; font-size: 14px; font-style: italic; line-height: 24px; resize: none; @extend .wpc-trans; @extend .font-1; &:focus{ outline: none; border-color: $pink; } } input{ height: 42px; } textarea{ height: 182px; padding: 15px; } textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #adaeb0; } textarea::-moz-placeholder, input::-moz-placeholder { /* Firefox 19+ */ color: #adaeb0; } textarea:-ms-input-placeholder, input:-ms-input-placeholder { /* IE 10+ */ color: #adaeb0; } textarea:-moz-placeholder, input:-moz-placeholder { /* Firefox 18- */ color: #adaeb0; } } .comment-form-author, .comment-form-email, .comment-form-url{ float: left; width: calc(33.3333% - 17px); } .comment-form-author, .comment-form-email{ margin-right: 25px; } .comment-form-comment{ clear: both; } .form-submit{ margin-top: 28px; text-align: center; input[type="submit"]{ min-width: 260px; height: 42px; background-color: #b5b6b7; border-radius: 3px; color: white; font-size: 10px; font-weight: 400; line-height: 24px; text-transform: uppercase; letter-spacing: 1.4px; border: none; cursor: pointer; @extend .wpc-trans; &:hover{ background: $pink; } } } } /*----------------------------------------------------------------------*/ /* GALLERY */ /*----------------------------------------------------------------------*/ .c-jgallery{ margin: -10px; padding: 0 35px; a{ overflow: hidden; img{ @extend .wpc-trans; &:hover{ transform: scale(1.1); } } } } /*----------------------------------------------------------------------*/ /* FOOTER */ /*----------------------------------------------------------------------*/ .site-footer{ border-top: 1px solid #f2f2f2; } .footer-instagram{ padding: 0 5px; .footer-instagram-title{ padding: 31px 0 28px; text-align: center; color: #2f2e2e; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; @extend .font-1; } .footer-insta-box{ margin: 0 5px; overflow: hidden; } .footer-insta-link{ display: block; @extend .wpc-trans; &:hover{ transform: scale(1.1); } } } .site-info{ margin-top: 70px; padding-bottom: 75px; text-align: center; .site-title a{ color: $dark-gray; font-size: 90px; font-weight: 400; } .site-slogan{ margin-top: 7px; color: #4b4b4e; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; @extend .font-1; } .footer-social{ margin-top: 21px; li{ display: inline-block; padding: 0 7px; a{ color: $dark-gray; font-size: 16px; font-weight: 400; line-height: 24px; @extend .wpc-trans; &:hover{ color: $pink; } } } } } /*----------------------------------------------------------------------*/ /* SIDEBAR */ /*----------------------------------------------------------------------*/ .c-widget{ float: right; padding: 36px 30px 28px; width: 100%; max-width: 320px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); &:not(:last-child){ margin-bottom: 40px; } .widget-title{ margin-bottom: 16px; color: $dark-gray; font-size: 11px; font-weight: 700; line-height: 22px; text-transform: uppercase; text-align: center; letter-spacing: 1.6px; @extend .font-1; } a{ @extend .wpc-trans; &:hover{ color: $pink; } } } /* about */ .widget_about{ padding-bottom: 45px; text-align: center; .about-img-wrap{ padding-top: 12px; text-align: center; a{ display: inline-block; overflow: hidden; } img{ @extend .wpc-trans; &:hover{ transform: scale(1.1); } } } p{ margin-top: 17px; color: #4f4c4d; font-size: 14px; font-weight: 400; line-height: 24px; } .about-signature{ margin-top: 18px; text-align: center; color: #262324; font-size: 24px; font-weight: 400; line-height: 24px; @extend .font-4; } } /* social icons */ .widget_social{ padding-bottom: 39px; text-align: center; ul{ padding-top: 13px; } li{ display: inline-block; padding: 0 5px; a{ display: block; width: 36px; height: 36px; border: 1px solid #eeeded; border-radius: 50%; color: $dark-gray; font-size: 16px; font-weight: 400; line-height: 34px; } } } /* recent posts */ .widget_subscribe_recent{ padding-bottom: 39px; .recent-post{ display: block; &:hover{ .entry-title{ color: $pink; } } } ul{ padding-top: 13px; li:not(:last-child){ margin-bottom: 17px; .recent-post{ padding-bottom: 16px; border-bottom: 1px dashed #e8e8e8; } } } .recent-post-img{ float: left; } .recent-post-content{ padding-left: 13px; overflow: hidden; } .entry-title{ margin-top: 3px; color: $dark-gray; font-size: 13px; font-weight: 400; @extend .wpc-trans; } .entry-date{ display: block; margin-top: 8px; color: #bbb; font-size: 12px; font-weight: 400; } } /* subscribe */ .widget_subscribe{ padding-bottom: 40px; label{ text-align: center; display: block; } .subscribe-field{ margin-top: 7px; padding: 0 16px; width: 100%; height: 42px; background-color: white; border: 1px solid #e4e5e9; border-radius: 3px; color: #adaeb0; font-size: 14px; font-style: italic; line-height: 24px; @extend .font-1; @extend .wpc-trans; &:focus{ border-color: $pink; outline: none; } } .subscribe-submit{ margin-top: 16px; width: 100%; height: 42px; background-color: #262627; border-radius: 3px; border: 1px solid #262627; color: white; font-size: 10px; font-weight: 700; line-height: 24px; text-transform: uppercase; cursor: pointer; @extend .wpc-trans; letter-spacing: 1px; &:hover{ color: #262627; background: transparent; } } } /* instagram */ .widget_instagram{ padding-bottom: 31px; .c-instagram-wrap{ padding-top: 12px; margin-left: -6px; margin-right: -6px; } img{ padding-bottom: 5px; display: block; } a{ padding: 0 5px; float: left; width: 33%; margin-bottom: 5px; overflow: hidden; } a:not(:nth-child(3n)){ } } /* advertisement */ .widget_advertisement{ padding-bottom: 41px; .c-advertisement-wrap{ text-align: center; margin-top: 28px; position: relative; } .advertisement-caption{ position: absolute; padding: 4px 15px 2px; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); color: white; font-family: Georgia; font-size: 15px; font-weight: 700; line-height: 24px; background: rgba(0,0,0,.10); } a{ display: inline-block; overflow: hidden; &:hover{ img{ transform: scale(1.1); } } img{ @extend .wpc-trans; } } } /* categories */ .c-widget.widget_categories{ li:not(:last-child){ border-bottom: 1px dashed #bbb; } a{ display: block; color: $dark-gray; font-size: 13px; font-weight: 400; line-height: 37px; @extend .font-2; @extend .wpc-trans; &:hover{ color: $pink; } i{ display: inline-block; margin-left: 3px; color: #bbb; } } } .test{ position: fixed; width: 50px; height: 50px; background: teal; } /*----------------------------------------------------------------------*/ /* SIDE POPUP */ /*----------------------------------------------------------------------*/ .c-sidepop{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.4); z-index: 15; &.active{ display: block; .sidepop-content{ transform: translateX(0); } .close-sidepop{ position: fixed; float: none; display: block; right: 10px; top: 30px; z-index: 10; } } .sidepop-content{ position: absolute; padding: 30px; right: 0; top: 0; max-width: 400px; height: 100%; background: #fff; transform: translateX(100%); overflow-y: auto; @extend .wpc-trans; } .close-sidepop{ margin-left: auto; position: relative; height: 32px; width: 32px; margin-bottom: 30px; cursor: pointer; &:hover{ &:before, &:after{ background: $pink; } } &:before, &:after{ content: ""; position: absolute; top: 16px; height: 2px; width: 32px; background: $dark-gray; @extend .wpc-trans; } &:before{ transform: rotate(45deg); } &:after{ transform: rotate(-45deg); } } .c-widget { margin-left: auto; margin-right: auto; float: none; } } /*----------------------------------------------------------------------*/ /* CONTACT PAGE */ /*----------------------------------------------------------------------*/ .c-contact-page{ padding: 35px 35px 50px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .contact-info{ padding-bottom: 28px; border-bottom: 1px dashed #e8e8e8; .info-details{ float: left; width: 30%; padding-top: 6px; padding-left: 37px; .details-title{ padding-bottom: 6px; font-size: 11px; color: $pink; text-transform: uppercase; letter-spacing: 1.7px; @extend .font-1; } a{ color: $dark-gray; font-size: 14px; line-height: 24px; font-weight: 700; @extend .wpc-trans; &:hover{ color: $pink; } } } .info-text{ float: left; width: 65%; font-size: 14px; color: #4f4c4d; line-height: 24px; } } /* form */ .c-reply-form{ padding: 3px 0 0 0; box-shadow: none; } .c-reply-form .form-submit input[type="submit"] { min-width: 202px; } } /*----------------------------------------------------------------------*/ /* CONTACT FORM RESPOND */ /*----------------------------------------------------------------------*/ .ajax-loader:before, .ajax-loader:after, .ajax-loader { border-radius: 50%; width: 1.5em; height: 1.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.8s infinite ease-in-out; animation: load7 1.8s infinite ease-in-out; } .ajax-loader { display: none; font-size: 10px; margin: -40px auto 0; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .ajax-loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .ajax-loader:after { left: 3.5em; } .ajax-loader:before, .ajax-loader:after { content: ''; position: absolute; top: 0; } @-webkit-keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #ffffff; } 40% { box-shadow: 0 2.5em 0 0 #ffffff; } } @keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #ffffff; } 40% { box-shadow: 0 2.5em 0 0 #ffffff; } } .ajax-result{ clear: both; margin-top: 20px; } .ajax-result .success, .ajax-result .error{ display: none; padding: 10px; font-size: 14px; font-weight: 400; @extend .font-1; opacity: .8; color: #4DAB4D; } .ajax-result .error{ color: $pink; } /*----------------------------------------------------------------------*/ /* ABOUT PAGE */ /*----------------------------------------------------------------------*/ .c-about{ padding: 40px 0 34px; background: #fff; box-shadow: 0 2px 4px rgba(91, 81, 73, 0.08); .c-about-header{ padding: 0 35px; .c-heading span{ font-size: 24px; font-weight: 400; } } .c-about-img{ margin-top: 35px; } .c-about-content{ padding: 46px 35px 0; &:after{ display: block; content: ""; padding-top: 44px; border-bottom: 1px dashed #e8e8e8; } } blockquote{ color: #8a8b8e; @extend .font-2; font-size: 18px; font-style: italic; line-height: 30px; &:before{ content: "“"; float: left; position: relative; top: 15px; left: 7px; color: #cdced0; font-family: Georgia; font-size: 68px; font-weight: 400; line-height: 24px; } p{ padding-left: 33px; overflow: hidden; } } cite{ display: block; margin-top: 15px; margin-bottom: 38px; padding-left: 60px; color: $dark-gray; @extend .font-2; font-size: 16px; font-weight: 700; line-height: 24px; } .content-left, .content-right{ float: left; width: 50%; color: #4f4c4d; font-size: 14px; font-weight: 400; line-height: 24px; } .content-left{ padding-right: 10px; } .content-right{ padding-left: 15px; } .c-about-footer{ padding-top: 19px; text-align: center; li{ display: inline-block; padding: 0 6px; } a{ font-size: 14px; font-weight: 400; line-height: 24px; color: $dark-gray; @extend .wpc-trans; &:hover{ color: $pink; } } } } /*----------------------------------------------------------------------*/ /* SEARCH POPUP */ /*----------------------------------------------------------------------*/ .search-popup { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 501; background: rgba(255, 255, 255, 0.8); transform: scale(1.5); visibility: hidden; opacity: 0; transition: all 400ms cubic-bezier(0.345, 0.855, 0.565, 1) 10ms; &:hover{ cursor: url(img/close-icon.png), auto; } } .search-popup.open { visibility: visible; opacity: 1; transform: scale(1); } .search-popup .search-form-wrap { width: 100%; max-width: 800px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: auto; } .input-field { position: relative; width: 100%; font-size: 14px; line-height: 14px; overflow: hidden; padding-bottom: 20px; display: inline-block; } .input-field:before { content: ''; position: absolute; bottom: 0px; right: 0px; width: 100%; height: 2px; background: transparent; z-index: 5; transition: all 400ms cubic-bezier(0.345, 0.855, 0.565, 1) 10ms; } .input-field:after { content: ''; position: absolute; bottom: 0px; left: -105%; width: 100%; height: 2px; background: $pink; z-index: 5; transition: all 400ms cubic-bezier(0.345, 0.855, 0.565, 1) 10ms; } .input-field.active:before {right: -105%;} .input-field.active:after {left: 0px;} .input-field .input { position: absolute; left: 0px; background: none; color: #fff; width: 100%; padding-right: 50px; -webkit-appearance: none; border-radius: 0; outline: none; border: none; font-size: 17px; font-weight: 500; @extend .wpc-trans; @extend .font-2; } .input-field .input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #F5F5F5; } .input-field .input::-moz-placeholder { /* Firefox 19+ */ color: #F5F5F5; } .input-field .input:-ms-input-placeholder { /* IE 10+ */ color: #F5F5F5; } .input-field .input:-moz-placeholder { /* Firefox 18- */ color: #F5F5F5; } .input-field .wraper {position: relative; width: 100%;} .search-form {position: relative; width: 100%; background: $dark-gray; padding: 50px 40px 45px; } .search-form .title {color: #fff; font-size: 20px; text-transform: uppercase; line-height: 20px; padding-bottom: 45px;} .submit {color: #909090; position: relative; float: right; margin-top: 4px;} .submit input {position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; z-index: 50; padding: 0px;border-radius: 0; outline: none; border: 0px none; outline: none; transition: all 0.3s ease-in; background: none; cursor: pointer; } .submit .fa{ color: #F5F5F5; font-size: 16px; @extend .wpc-trans; &:hover{ color: $pink; } } .close {position: absolute; right: 0px; top: 0px; width: 40px; height: 40px; background: #fff; color: #787878; text-align: center; line-height: 40px;} .close span {font-size: 24px; position: relative; backface-visibility: hidden; transform: rotate(45deg); -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg); display: block;} /*----------------------------------------------------------------------*/ /* ETC */ /*----------------------------------------------------------------------*/ .c-pagination{ margin-top: 88px; margin-bottom: 7px; padding: 0 18px; .c-pagination-link{ color: $dark-gray; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; @extend .wpc-trans; .fa{ position: relative; top: 1px; font-size: 14px; font-weight: 400; @extend .wpc-trans; } &:hover{ color: $pink; .fa{ color: $pink; } } } .c-pagination-link.left{ float: left; .fa{ margin-right: 10px; } } .c-pagination-link.right{ float: right; display: none; } } blockquote{ color: #8a8b8e; @extend .font-2; font-size: 18px; font-style: italic; line-height: 30px; &:before{ content: "“"; float: left; position: relative; top: 15px; left: 7px; color: #cdced0; font-family: Georgia; font-size: 68px; font-weight: 400; line-height: 24px; } p{ padding-left: 33px; overflow: hidden; } } cite{ display: block; color: $dark-gray; @extend .font-2; font-size: 16px; font-weight: 700; line-height: 24px; } /* tooltips */ .tooltipster-default{ background: $pink; color: #fff; border: none; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span{ border-color: $pink!important; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span{ border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; }