/*import CherryFramework style*/ @import url("../CherryFramework/style.css"); @import url(//fonts.googleapis.com/css?family=Raleway:400,300,200,700); @import url(//fonts.googleapis.com/css?family=Slabo+27px); /* #General ================================================== */ // Placeholder text // ------------------------- .placeholder(@color: @placeholderText) { &::-moz-placeholder { color: @color; opacity: 1; } &::-ms-input-placeholder { color: @color; } &::-webkit-input-placeholder { color: @color; } } body { padding: 0 !important; } button { &:focus { outline: none; } } a { .transition(color 0.4s); &:hover, &:active, &:focus { text-decoration: none; } &:active { background-color: transparent; } } h2 { margin: 0 0 52px 0; @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 30px; } @media (max-width: 767px) { margin-bottom: 30px; } } /* #Header ================================================== */ .header { background-color: transparent; border: none; border-bottom: 1px solid #cecdcd !important; padding: 34px 0 35px 0; .transition(padding 0.4s); @media (max-width: 767px) { padding-left: 20px; padding-right: 20px; } .home & { border: none !important; } &.isStuck { width: 100%; padding: 15px 0; top: 0; border: none; .box-shadow(0 1px 15px rgba(0,0,0,.25)); @media (max-width: 767px) { width: auto; padding: 34px 20px 35px; position: relative !important; top: 0 !important; .box-shadow(none); } } } .pseudoStickyBlock { max-height: 66px !important; @media (max-width: 767px) { display: none !important; } } /*/ Header */ /* Logo ---------------------------------------- */ .logo { @media (min-width: 768px) and (max-width: 979px) { width: 100%; } @media (max-width: 767px) { float: none; text-align: center; margin-bottom: 20px; } } /*/ Logo */ /* Search Form ---------------------------------------- */ .search-form { &_it { display: block; .widget &, .error404-holder & { width: 100%; height: 34px; .box-sizing(border-box); } } &_is { display: block; } } /* /Search Form */ /* #Navigation ---------------------------------------- */ .nav { &__primary { margin-bottom: 0; } } /* Essential styles for dropdown menu */ .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 50%; margin: 17px 0 0 -83px; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 100%; /* match ul width */ top: -22px; margin: 0 0 0 5px; } /* Our skin for dropdown menu */ .sf-menu { padding-top: 8px; } .sf-menu > li { background: none; margin-left: 5px; &:first-child { margin-left: 0; } } .sf-menu > li > a { padding: 0 10px; border: none; text-transform: uppercase; position: relative; &:after { content: ''; position: absolute; left: 0; top: -42px; width: 100%; height: 0; background-color: @orange; .transition(0.4s); .isStuck & { top: -23px; } } } .sf-menu li ul { width: 166px; background-color: @white; border: 1px solid #e3e3e3; padding: 22px 0 21px 0; .border-radius(1px); } .sf-menu li li { background: none; text-align: left; margin-top: 16px; &:first-child { margin-top: 0; } } .sf-menu li li a { padding: 0; margin: 0 20px; display: inline-block; vertical-align: top; border: none; color: #858585; font-weight: bold; text-transform: uppercase; } .sf-menu > li > a:hover, .sf-menu > li.sfHover> a, .sf-menu > li.current-menu-item > a, .sf-menu > li.current_page_item > a { background: none; &:after { height: 6px; } } .sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current-menu-item > a, .sf-menu li li.current_page_item > a { color: @orange; background: none; } /* #Content ================================================== */ .content-holder { background-color: @white; @media (max-width: 767px) { padding-left: 20px; padding-right: 20px; } .home & { padding-bottom: 96px; } .page-id-7 & { padding-bottom: 1px; } } #content { padding-top: 45px; @media (min-width: 1200px) { padding-top: 89px; } } /* Title ---------------------------------------- */ .title{ &-section { padding: 26px 0 25px 0; border-bottom: 1px solid #cecdcd; position: relative; text-align: center; &:before, &:after { content: ''; width: 300%; height: 1px; position: absolute; bottom: -1px; background-color: #cecdcd; z-index: -1; } &:before { left: -299%; } &:after { right: -299%; } } &-header { font-size: 30px; font-weight: bold; line-height: 1.2em; color: #4b4b4b; overflow: visible; margin: 0 0 2px 0; } } /* Breadcrumb ---------------------------------------- */ .breadcrumb__t { padding: 0; background-color: transparent; li { text-shadow: none; font-weight: 300; &.active { } &.divider { margin: 0 4px; .hide-text(); &:after { content: ' / '; color: @textColor; font: 300 @baseFontSize/@baseLineHeight @baseFontFamily; } } a { color: @textColor; &:hover, &:active, &:focus { color: @linkColor; } } } } /* /Breadcrumb */ /* #Post ================================================== */ .post { &__holder { .post-header{ .post-title{ font-size: 18px; line-height: 1.2em; margin: 0 0 13px 0; } } .featured-thumbnail{ &.large{ margin: 0 0 33px 0; } } .post_content{ padding-bottom: 0; .excerpt { margin-bottom: 15px; } } }//post__holder } .post_meta { font-size: @baseFontSize; border: none; padding: 0 0 0 1px; div[class^="post_"] { padding: 0 22px 0 0; @media (max-width: 767px) { padding-bottom: 10px; } a { color: @textColor; &:hover, &:active, &:focus { color: @linkColor; } } } i { font-size: 23px; color: @orange; padding: 0 5px 0 0; position: relative; top: 2px; &.icon-calendar { &:before { content: '\f017'; } } &.icon-comments { &:before { content: '\f0e5'; } } } } /* Author Page ---------------------------------------- */ .post-author { padding: 34px 20px 26px 28px; border: 1px solid @tableBorder; background-color: transparent; @media (max-width: 767px) { padding: 20px; } &_h { font-size: 22px; font-weight: bold; line-height: 1.2em; margin: 0 0 21px 0; a { text-transform: capitalize; } } &_link { font-size: 19px; font-weight: bold; line-height: 1.2em; color: #4b4b4b; margin-top: 0; p { margin: 0 0 10px 0; } a { font-weight: 300; color: @orange; text-transform: capitalize; &:hover, &:active, &:focus { color: @linkColorHover; } } } &_gravatar { margin: 4px 20px 10px 0; & img { padding: 0; border: none; background: none; } } .post-author_desc{ overflow: visible; margin-top: 0; @media (min-width: 1200px) { overflow: hidden; } } } /* Recent author posts */ #recent-author-posts { .post__holder { margin-bottom: 40px; } } /* Recent author comments */ #recent-author-comments { ul { margin: 0; li { list-style-type: none; margin-bottom: 5px; } } } /* Testimonials Page ---------------------------------------- */ .testimonial { border-color: #dedede; background: none; font-style: normal; font-family: @baseFontFamily; .border-radius(0px); &_bq { p { font-size: @baseFontSize; line-height: @baseLineHeight; } } & small { font-family: @baseFontFamily; font-size: @baseFontSize; } } /* Related Posts */ .related-posts { &_h { font-size: 30px; font-weight: bold; line-height: 1.2em; margin: 0 0 30px 0; text-align: center; @media (min-width: 1200px) { margin-bottom: 75px; } } &_list { margin: 0; } &_item { width: auto; font-size: @baseFontSize; line-height: @baseLineHeight; h3 { font-size: 18px; font-weight: bold; line-height: 1.2em; margin: 0 0 13px 0; } } .featured-thumbnail { margin: 0 0 20px 0; @media (min-width: 1200px) { margin-bottom: 30px; } @media (min-width: 481px) and (max-width: 767px) { float: left; margin: 0 20px 10px 0; max-width: 200px; } } } /*/ Related Posts */ /* Share buttons */ .share-buttons { span, li { line-height: 17px; } } /*/ Share buttons */ /* Posts navigation ---------------------------------------- */ .pagination__posts { text-align: left; .page-template-page-Portfolio2Cols-filterable-php &, .page-template-page-Portfolio3Cols-filterable-php &, .page-template-page-Portfolio4Cols-filterable-php & { text-align: center; } & ul { .box-shadow(none); & li { & a { width: 35px; height: 35px; line-height: 35px; font-size: 14px; color: @textColor; background: none !important; border: none !important; border: 1px solid #d0cfcf !important; padding: 0; margin: 0 5px 0 0 !important; text-align: center; .box-sizing(border-box); .border-radius(35px) !important; .transition(0.4s); &:hover, &:active, &:focus { color: @white; border: 1px solid @orange !important; background: @orange !important; } } } & .active { span { width: 33px; height: 33px; line-height: 33px; background: none !important; border: none !important; color: @white; padding: 0; margin: 0 5px 0 0 !important; text-align: center; border: 1px solid @orange !important; background: @orange !important; .border-radius(35px) !important; } } & .prev, & .next, & .first, & .last { display: none; } } } /* /Posts navigation */ /* Filterable Portfolio ---------------------------------------- */ .filter-wrapper { .pull-right { float: none !important; text-align: center; } strong { display: none; } .nav { overflow: visible; } } .nav-pills { margin-bottom: 53px; float: none; display: inline-block; vertical-align: top; @media (max-width: 767px) { margin-bottom: 30px; } li { a { color: @textColor !important; background: none !important; padding: 17px 34px; margin: 0 3.5px !important; border: 1px solid #cecdcd !important; .border-radius(0px) !important; .transition(0.4s); @media (min-width: 768px) and (max-width: 979px) { padding: 10px 15px; margin-bottom: 7px !important; } @media (max-width: 767px) { padding: 10px 15px; margin-bottom: 7px !important; } @media (max-width: 480px) { padding: 10px 15px; margin: 0 0 5px 0 !important; } &:hover, &:active, &:focus { border-color: @orange !important; background-color: @orange !important; color: @white !important; } } &.active { a { border-color: @orange !important; background-color: @orange !important; color: @white !important; } } } } .filterable-portfolio { margin-bottom: 66px; & .portfolio_item { padding: 0; margin: 0; } } /* Zoom Icon */ .zoom-icon { background: rgba(242, 114, 75, .8); } .zoom-icon:before { margin: -28.5px 0 0 -28.5px; width: 57px; height: 57px; background: url(images/magnify-alt.png) 50% 50% no-repeat; .transition(0.4s); .translate(0,-20px); .opacity(0); } .featured-thumbnail a:hover .zoom-icon:before, a.thumbnail:hover .zoom-icon:before, .thumbnail__portfolio a:hover .zoom-icon:before { .opacity(100); .translate(0,0); } /* Page Header */ .page-header { margin: 0 0 20px 0; padding: 0; border: none; h1 { font-weight: bold; margin: 0; padding: 0; } } /* Single Pager */ .single-pager { border-color: #dedede; a { color: @textColor; font-size: @baseFontSize; border-color: #dedede !important; .border-radius(0px) !important; .transition(0.4s); &:hover, &:active, &:focus { border-color: @orange !important; background-color: @orange !important; color: @white; } } } /*/ Content */ /* #Comments ================================================== */ /* Comment Heading */ .comments-h { font-size: 30px; font-weight: bold; line-height: 1.2em; text-align: center; margin: 0 0 55px 0; } /* Comment List */ .comment .comment-body { padding: 30px 37px 33px 28px; margin-bottom: 26px; background: none; border-color: #dedede; @media (min-width: 768px) and (max-width: 979px) { padding: 20px; } @media (max-width: 767px) { padding: 20px; } .extra-wrap { @media (min-width: 768px) and (max-width: 979px) { overflow: visible; .extra-wrap { overflow: hidden; } } @media (max-width: 767px) { overflow: visible; .extra-wrap { overflow: hidden; } } } .author { float: left; font-size: 16px; font-weight: 300; line-height: 1.2em; color: @orange; text-transform: capitalize; margin: 0 0 10px 0; .hyphens(auto); @media (max-width: 767px) { float: none; display: block; } } } .comment.bypostauthor .comment-body { background: none; } .comment-author { margin: 3px 20px 10px 0; } /* Comment meta */ .comment-meta { float: left; padding: 0; font-size: 16px; font-weight: 300; line-height: 1.2em; color: #4b4b4b; @media (max-width: 767px) { float: none; margin-bottom: 10px; } &:before { content: '|'; padding: 0 7px; font-weight: 400; @media (max-width: 767px) { display: none; } } } /* Reply */ .reply { margin-left: 0; font-weight: bold; @media (max-width: 767px) { float: none; margin-bottom: 20px; } .comment-reply-link { background: none; padding: 0; color: @orange; &:hover, &:active, &:focus { color: @linkColorHover; } } } #respond { h3 { font-size: 30px; font-weight: bold; line-height: 1.2em; text-align: center; margin: 0 0 75px 0; @media (max-width: 767px) { margin-bottom: 30px; } } } .comment-list ul.children { margin: 0 0 0 50px; @media (min-width: 1200px) { margin-left: 100px; } } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { .comment-list ul.children { margin: 0; } } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { .comment-list ul.children { margin: 0; } } /* Comment form */ #commentform { p.field { margin-bottom: 22px; } input[type="text"] { padding: 18px 21px; width: 100%; height: 58px; .box-sizing(border-box); @media (min-width: 768px) and (max-width: 979px) { font-size: 13px; padding-left: 12px; padding-right: 12px; } } textarea { height: 218px; min-height: 218px; padding: 18px 21px; @media (min-width: 768px) and (max-width: 979px) { font-size: 13px; padding-left: 15px; padding-right: 15px; } } } /*/ Comments */ /* #Widgets ================================================== */ #sidebar { padding-top: 45px; @media (min-width: 1200px) { padding-top: 89px; } .widget { > h3 { font-weight: bold; } ul { margin: 0; li { list-style-type: none; margin-bottom: 10px; &:before { content: '\f0a9'; font-family: FontAwesome; color: @linkColorHover; padding-right: 10px; } } ul { margin: 10px 0 0 21px; } } } } /* Standard Widgets ---------------------------------------- */ /* Calendar */ #wp-calendar td { &#today { color: @linkColor; font-weight: bold; } } #wp-calendar caption { color: @linkColor; } #wp-calendar thead th { color: @linkColor; } /*/ Calendar */ /* Custom Widgets ---------------------------------------- */ /* Custom Recent Comments */ .comments-custom { & li { &:before { display: none !important; } } &_txt { border-color: #cecdcd; } &_txt a { } &_txt a:hover { text-decoration: none; } &_h_title { font-weight: bold; } } /*/ Custom Recent Comments */ /* Posts List */ .post-list { & li { &:before { display: none !important; } } &_h { font-weight: bold; } } /*/ Posts List */ /* Banners widget ---------------------------------------- */ .banners { margin-bottom: 30px; } /*/ Banners widget */ /* Flickr widget */ .flickr { &_li { &:before { display: none !important; } } &_li .thumbnail { &:hover, &:active, &:focus { .box-shadow(none); } .zoom-icon { &:before { width: 40px; height: 40px; margin: -20px 0 0 -20px; background-size: cover; } } } } /*/ Flickr widget */ /* Social Networks ---------------------------------------- */ .social { &_li { &:before { display: none !important; } } &_link:hover { .opacity(100); } } /* /Social Networks */ /*/ Widgets */ /* #Shortcodes ================================================== */ /* Banner ---------------------------------------- */ .banner-wrap { &__style-1 { width: 50%; float: left; margin: 0; border-left: 1px solid #cecdcd; border-top: 1px solid #cecdcd; border-bottom: 1px solid #cecdcd; position: relative; z-index: 1; .transition(0.4s); .box-sizing(border-box); @media (max-width: 767px) { float: none; width: 100%; border-left: none; } &:after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ecf0f1; z-index: -1; .transition(0.4s); } .banner-wrap__inner { max-width: 585px; padding: 82px 0 96px 30px; float: left; .box-sizing(border-box); @media (min-width: 1200px) { padding-left: 60px; } @media (min-width: 768px) and (max-width: 979px) { padding-right: 20px; padding-top: 30px; padding-bottom: 30px; } @media (max-width: 767px) { padding: 30px 20px; } } &.text-right { border-left: none; border-right: 1px solid #cecdcd; margin-right: -1px; @media (max-width: 767px) { border-right: none; border-bottom: none; } &:after { left: auto; right: 0; } .banner-wrap__inner { float: right; padding-left: 0; padding-right: 30px; @media (min-width: 1200px) { padding-right: 60px; } @media (min-width: 768px) and (max-width: 979px) { padding-left: 20px; } @media (max-width: 767px) { padding-left: 20px; } } p { margin: 0; } } h5 { font-size: 30px; font-weight: bold; line-height: 36px; margin: 0 0 14px 0; @media (min-width: 768px) and (max-width: 979px) { font-size: 24px; } @media (max-width: 767px) { font-size: 24px; } a { color: #585858; &:hover, &:active, &:focus { color: @linkColor; } } } p { font-size: 14px; line-height: 30px; margin: 0 -5px 0 0; } &:hover { &:after { width: 100%; } } } &__style-2 { text-align: center; .featured-thumbnail { margin: 0 0 32px 0; @media (max-width: 767px) { display: inline-block; vertical-align: top; } a { border: none; max-width: 100%; } } h5 { font-size: 12px; line-height: 1.2em; text-transform: uppercase; margin: 0 0 15px 0; a { color: @linkColorHover; &:hover, &:active, &:focus { color: @linkColor; } } } p { font-size: 12px; line-height: 24px; margin: 0; } } } /* Services Box ---------------------------------------- */ .service-box { &__style-1 { padding: 21px 15px 33px 14px; background-color: transparent; border: none; position: relative; overflow: visible; text-align: center; .box-shadow(none); .border-radius(0px); @media (max-width: 767px) { padding-left: 0; padding-right: 0; } &:before, &:after { content: ''; width: 1px; height: 100%; position: absolute; left: -10px; top: 0; @media (min-width: 1200px) { left: -15px; } @media (max-width: 767px) { display: none; } } &:before { background-color: #f5f6f7; } &:after { background-color: #ebedee; left: -11px; @media (min-width: 1200px) { left: -16px; } } &.service-box__first { padding-left: 0; &:before, &:after { display: none; } } .icon { float: none; margin: 0 0 13px 0; } h2 { font-size: 12px; line-height: 1.2em; text-transform: uppercase; color: @linkColorHover; margin: 0 0 15px 0; } .service-box_txt { font-size: 12px; line-height: 24px; color: #585858; margin-bottom: 0; text-align: left; } } } /* Posts Grid -----------------------------------------*/ .posts-grid { &__style-1 { position: relative; left: 50%; &:before, &:after { display: none; } li { margin: 0 !important; &.span2 { width: 25% !important; @media (min-width: 1200px) { width: 16.66666666666667% !important; } @media (max-width: 767px) { width: 33.33333333333333% !important; float: left !important; } @media (max-width: 480px) { width: 50% !important; } } &:hover { .featured-thumbnail { .site-url { .opacity(100); } .zoom-icon:before { .translate(0,0); } } } } h5 { display: none; } .featured-thumbnail { width: 100%; .zoom-icon { &:before { margin-top: -47px; @media (max-width: 767px) { margin-top: -40px; } } } .site-url { font-size: 18px; position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; .opacity(0); .transition(0.4s); .translate(0,20px); @media (min-width: 1200px) { bottom: 112px; } @media (min-width: 768px) and (max-width: 979px) { bottom: 60px; } @media (max-width: 767px) { font-size: 14px; bottom: 32px; } a { color: @white; } } &:hover { .site-url { .opacity(100); .translate(0,0); } .zoom-icon:before { .opacity(100); } .zoom-icon { opacity: 1; } } } } &__style-2 { padding-top: 72px; @media (min-width: 768px) and (max-width: 979px) { padding-top: 0; } @media (max-width: 767px) { padding-top: 0; } > li { text-align: center; margin-bottom: 108px; @media (max-width: 767px) { max-width: 222px; width: 222px !important; margin: 0 auto 30px !important; } > .inner { border: 1px solid #e3e3e3; margin: 0 12px; padding-bottom: 25px; .border-radius(1px); @media (min-width: 1200px) { margin: 0 24px; } @media (min-width: 768px) and (max-width: 979px) { margin: 0; } @media (max-width: 767px) { margin: 0; } } .featured-thumbnail { border-bottom: 1px solid #e3e3e3; margin: 0 0 19px 0; } } h5 { font-size: 19px; font-weight: 300; line-height: 1.2em; margin: 0 0 3px 0; } .teampos { font-size: 13px; line-height: 1.2em; color: #8e8e8e; } .post_networks { &:before { content: ''; display: block; width: 74px; height: 1px; margin: 19px auto 18px; background-color: #dfdfdf; } ul { li { width: auto; margin: 0; display: inline-block; vertical-align: top; float: none; a { font-size: 22px; color: #c5c5c5; &:hover, &:active, &:focus { color: @linkColorHover; } } span { margin: 0 8px !important; @media (min-width: 768px) and (max-width: 979px) { margin: 0 6px !important; } @media (max-width: 767px) { margin: 0 6px !important; } } } } } } } /*/ Shortcodes */ /* #Footer ================================================== */ .footer { background-color: transparent; border: none; padding: 0 0 66px 0; text-align: center; @media (max-width: 767px) { padding-left: 20px; padding-right: 20px; } } /* Footer widget */ .footer-widgets { margin-bottom: 63px; text-align: left; } /* Footer navigation */ nav.footer-nav { float: none; margin-bottom: 0; ul { float: none; li { float: none; display: inline; vertical-align: top; padding: 0 10px; @media (max-width: 767px) { padding: 0 5px; } a { text-transform: uppercase; &:hover, &:active, &:focus { color: @linkColor; } } } li.current-menu-item a { text-decoration: none; color: @linkColor; } } } /* Copyright */ .copyright { padding: 0; } /* Footer text */ .footer-text { float: none; font-size: 18px; text-transform: uppercase; line-height: 1.2em; color: @white; a { color: inherit; &:hover, &:active, &:focus { color: @linkColor; } } } /*/ Footer */ /* #Misc ================================================== */ /* Google Map API */ .google-map-api { @media (max-width: 767px) { height: 300px; } } /* Dropcap */ .dropcap { margin: 10px 15px 0 0; overflow: visible; width: 82px; height: 82px; background: none; border: 2px solid @orange; color: @orange; font-weight: 300; font-size: 50px; line-height: 78px; .border-radius(50%); .box-sizing(border-box); .custom-block-5 & { &:before { content: ''; position: absolute; left: -16px; top: 50%; width: 14px; height: 1px; background-color: #ebedee; z-index: -1; .box-shadow(0 1px 0 #f5f6f7); @media (max-width: 767px) { display: none; } } } .dropcap_right & { float: right; margin: 10px 0 0 15px; .custom-block-5 & { &:before { right: -16px; left: auto; } } } } /* List Styling */ .list { &.styled { > ul { li { margin-bottom: 10px; &:before { width: auto; height: auto; padding-right: 10px; margin: 0; color: @linkColorHover; } } } } } /* Flexslider */ .flexslider { li { &:before { display: none !important; } .widget & { text-align: center; } } h5 { font-size: @baseFontSize; font-weight: bold; } .thumbnail { .widget & { margin: 0 0 10px 0; } } &__style-1 { text-align: center; margin: 0; overflow: visible !important; h5 { display: none; } .excerpt { font-size: 19px; font-weight: bold; line-height: 24px; position: relative; padding: 57px 0 0 0; margin: 0 0 23px 0; @media (min-width: 1200px) { padding-left: 25px; padding-right: 25px; } &:before { content: ''; position: absolute; left: 50%; top: 0; margin: 0 0 0 -20.5px; width: 41px; height: 28px; background-image: url(images/quotes.png); } } .post_options { .user { font-size: 19px; line-height: 1.2em; &:before { content: '- '; } } } .flex-control-paging { bottom: -71px; } .flex-control-paging li a { width: 35px; height: 35px; line-height: 31px; text-indent: 0; color: @white; background-color: transparent; border: 2px solid @white; .border-radius(50%); .box-sizing(border-box); .box-shadow(none); .transition(0.4s); &:hover, &:active, &:focus { background-color: @orange; border-color: @orange; } &.flex-active { background-color: @orange; border-color: @orange; } } } } .flex-viewport { .widget & { padding-bottom: 10px; } } .flex-direction-nav a { text-shadow: none; .widget & { top: auto !important; bottom: -47px !important; color: @linkColorHover; } } /* Form Elements */ input[type="submit"], input[type="reset"] { height: 34px; padding: 0 30px; background-color: @orange !important; color: @white !important; text-transform: capitalize; .transition(0.4s); &:hover, &:focus { background-color: @linkColorHover !important; outline: none; .transition(0.4s); } } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { padding: 6px 21px; border-color: #dedede !important; .border-radius(0px); .box-shadow(none); &:focus { .box-shadow(none); } } select { padding: 0; } /* Contact form */ .wpcf7-form { p.field { input { padding: 18px 21px; height: 58px; } } textarea { padding: 18px 21px; line-height: @baseLineHeight; } .ajax-loader { margin-top: 7px; } } .wpcf7-not-valid-tip { padding: 9px 0 9px 21px !important; @media (min-width: 1200px) { padding-top: 18px !important; padding-bottom: 18px; } @media (min-width: 768px) and (max-width: 979px) { padding: 10px 15px !important; } @media (max-width: 767px) { padding: 18px 21px !important; } } .home { .wpcf7 { form { margin: 0; } p { margin-bottom: 29px; &.field { margin-bottom: 29px; } } input[type="text"], input[type="email"] { width: 100%; height: 36px; padding: 9px 19px; margin: 0; line-height: 16px; border-color: #c4c4c4 !important; .box-sizing(border-box); .border-radius(1px); .box-shadow(inset 0 0 1px 1px #f4f4f4); } textarea { border-color: #c4c4c4 !important; padding: 9px 19px; height: 219px; .box-shadow(inset 0 0 1px 1px #f4f4f4); .box-sizing(border-box); } .submit-wrap { text-align: right; position: relative; margin: 0; .clearfix(); } input[type="submit"] { font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 0 39px; margin: 0; height: 50px; color: @linkColorHover !important; float: right; background: none !important; border: 1px solid #6b6b6b; .border-radius(1px); &:hover, &:focus { background: @linkColor !important; border-color: @linkColor; color: @white !important; } } .ajax-loader { margin: 15px 10px 0 0; } } .wpcf7-not-valid-tip { padding: 7px 0 7px 19px !important; .border-radius(1px); } } /* MailChimp */ .mc4wp-form { margin: 0 !important; form { margin: 0; } input[type="email"], input[type="text"] { background-color: transparent; border-color: @white; width: 303px !important; padding: 6px 28px; margin: 0; display: inline !important; vertical-align: top; .box-sizing(border-box); @media (min-width: 1200px) { width: 346px !important; } @media (min-width: 768px) and (max-width: 979px) { width: 230px !important; } @media (max-width: 767px) { width: 100% !important; margin-bottom: 10px !important; } .widget & { width: 100% !important; } .parallax-box__style-2 & { color: @white; margin: 0; .placeholder(rgba(255,255,255,.3)); } &:focus { .box-shadow(none); } } input[type="submit"] { border: none; height: 34px; padding: 0 31px; margin: 0; background-color: @white !important; color: @linkColorHover !important; .parallax-box__style-2 & { margin: 0 0 0 29px; @media (min-width: 768px) and (max-width: 979px) { margin-left: 15px; } } .widget & { margin-top: 10px; color: @white !important; background-color: @orange !important; &:hover, &:focus { background-color: @linkColorHover !important; } } @media (min-width: 768px) and (max-width: 979px) { padding: 0 20px; } @media (max-width: 767px) { margin-left: 0; padding: 0 20px; } &:hover, &:focus { background-color: @linkColor !important; color: @white !important; } } .mc4wp-alert { @media (min-width: 1200px) { margin-right: 35px; margin-left: 34px; } } } /* Spacer */ .spacer { height: 113px; @media (min-width: 768px) and (max-width: 979px) { height: 60px; } @media (max-width: 767px) { height: 60px; } } /* Thumbnail */ .thumbnail, .featured-thumbnail { padding: 0; border: none; .border-radius(0px); .box-shadow(none); } /* Statistics */ .statistics { &__style-1 { text-align: center; position: relative; padding: 102px 0 46px 0; @media (max-width: 767px) { padding: 50px 0 0 0; } &:before, &:after { content: ''; width: 1px; height: 100%; position: absolute; left: -15px; top: 0; @media (max-width: 767px) { display: none; } } &:before { background-color: #f5f6f7; } &:after { background-color: #ebedee; left: -16px; } &.statistics__first { &:before, &:after { display: none; } } .number { font-size: 72px; line-height: 1em; color: @linkColorHover; @media (min-width: 768px) and (max-width: 979px) { font-size: 60px; } @media (max-width: 767px) { font-size: 60px; } &:after { content: ''; width: 44px; height: 3px; margin: 18px auto 26px; background-color: #939393; display: block; } } .desc { font-size: 14px; font-weight: bold; text-transform: uppercase; color: @linkColorHover; } } } /* Button */ .btn { text-shadow: none; &-primary { color: @linkColor !important; border: none; position: relative; background: none !important; .border-radius(0px); .box-shadow(none); &:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid @linkColor; } &.btn-large { font-size: 24px; padding: 14px 28px; } &:hover, &:active, &:focus { &:before { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); .transition(0.4s); } } } &:hover, &:active, &:focus { .box-shadow(none); } } /* Title Box */ .title-box { &__style-1 { margin-bottom: 8px; .title-box_primary { color: inherit; font-size: 36px; font-weight: 200; line-height: 1.2em; margin: 0 0 -5px 0; @media (max-width: 480px) { font-size: 30px; margin-bottom: 0; } } .title-box_secondary { color: inherit; font-size: 60px; font-weight: 300; line-height: 1.2em; text-transform: uppercase; @media (max-width: 480px) { font-size: 40px; } } } &__style-2 { text-align: center; margin-bottom: 109px; @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 40px; } @media (max-width: 767px) { margin-bottom: 40px; } .title-box_primary { font-size: 50px; font-weight: 300; line-height: 1.2em; color: #4b4b4b; } .title-box_secondary { font-size: 30px; font-weight: 300; line-height: 1.2em; color: #4b4b4b; strong { font-weight: inherit; color: #f2724b; } } } } /* Back to Top */ #back-top { &-wrapper { z-index: 100; } a { width: 67px; color: @orange; font-size: 54px; font-family: FontAwesome; &:hover { color: @orange; span { background: @white; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); .transition(0.4s); } } } span { width: 65px; height: 65px; background: @white; border: 1px solid #e0e0e0; .border-radius(50%); .transition(0.0s); &:before { content: '\f106'; line-height: 65px; } } } /*// Back to Top */ /* Custom */ .custom { &-block-1 { font-size: 24px; font-family: @Slabo27px; line-height: 29px; text-align: center; color: #b9b9b9; padding: 54px 0 53px 0; p { margin-bottom: 0; @media (min-width: 1200px) { padding: 0 58px; } } strong { font-weight: normal; color: #f2663b; } } &-block-2 { text-align: center; padding: 0 0 55px 0; p { font-size: 16px; line-height: 24px; margin-bottom: 0; color: #010101; @media (min-width: 1200px) { padding: 0 30px; } } } &-block-3 { h2 { margin-bottom: 72px; } h3 { font-weight: bold; color: @linkColor; margin: 0 0 30px 0; } h5 { font-size: 16px; font-weight: 300; line-height: 24px; margin: 0 0 22px 0; color: #010101; text-shadow: 0 0 0 #010101; } p { padding-top: 2px; margin-bottom: 18px; } } &-block-4 { background-color: #ecf0f1; position: relative; padding-top: 41px; padding-bottom: 28px; padding-left: 42px; color: #585858; .box-sizing(border-box); @media (min-width: 1200px) { padding-top: 82px; padding-bottom: 56px; } @media (max-width: 767px) { padding-left: 0; } &:before, &:after { content: ''; position: absolute; top: 0; height: 100%; z-index: -1; } &:before { width: 600%; right: -599%; background-color: inherit; } &:after { left: -11px; width: 15px; background-color: inherit; border-left: 1px solid #cecdcd; @media (min-width: 1200px) { left: -17px; } @media (max-width: 767px) { border: none; left: -20px; width: 20px; } } &.text-right { padding-left: 0; padding-right: 42px; @media (max-width: 767px) { padding-right: 0; } &:before { left: -599%; right: auto; } &:after { right: -10px; left: auto; border-left: none; border-right: 1px solid #cecdcd; @media (min-width: 1200px) { right: -14px; } @media (max-width: 767px) { right: -20px; } } } h2 { color: #585858; margin: 0 0 14px 0; } p { line-height: 30px; } .btn-link { padding: 0; margin: 7px 0 0 0; display: inline-block; vertical-align: top; border: none; .hide-text(); &:before { font-family: FontAwesome; font-size: 30px; line-height: 1em; color: @orange; .transition(color 0.4s); } &:hover, &:active, &:focus { text-decoration: none; &:before { color: @linkColorHover; } } } } &-block-5 { position: relative; padding: 42px 0 0 0; margin-bottom: 58px; @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 0; padding-top: 0; } @media (max-width: 767px) { margin-bottom: 0; padding-top: 0; } &:before { content: ''; position: absolute; left: 50%; top: 0; margin: 0 0 0 9.5px; display: block !important; width: 1px; height: 100%; background-color: #ebedee; .box-shadow(1px 0 0 #f5f6f7); @media (min-width: 1200px) { margin: 0 0 0 14px; } @media (max-width: 767px) { display: none !important; } } .extra-wrap { @media (max-width: 767px) { overflow: visible; } } h5 { font-size: 12px; font-weight: bold; line-height: 1.2em; text-transform: uppercase; margin: 30px 0 15px 0; color: @linkColorHover; } p { font-size: 12px; line-height: 24px; margin: 0 0 25px 0; } } } /* Content Box */ .content_box { &:before, &:after { background-color: inherit; width: 300%; } &:before { left: -299%; } &:after { right: -299%; } &__style-1 { background-color: transparent; position: relative; left: 50%; } &__style-2 { background-color: transparent; border-bottom: 1px solid #ebedee; margin: 0 0 125px 0; .box-shadow(0 1px 0 #f5f6f7); @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 50px; } @media (max-width: 767px) { margin-bottom: 50px; } &:before, &:after { border: inherit; .box-shadow(inherit); } } &__style-3 { margin: 0 0 116px 0; background-color: transparent; border-top: 1px solid #f5f6f7; .box-shadow(0 -1px 0 #ebedee); @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 60px; } @media (max-width: 767px) { margin-bottom: 60px; } &:before, &:after { border: inherit; top: -1px; .box-shadow(inherit); } } } /* Parallax Box */ .parallax-box { &__style-1 { color: @white; .parallax-content { padding: 242px 0 250px 0; @media (min-width: 768px) and (max-width: 979px) { padding: 120px 0 150px 0; } @media (max-width: 767px) { padding: 120px 0 150px 0; } } .btn-primary { color: inherit !important; &:before { border-color: @white; } } } &__style-2 { text-align: center; color: @white; .parallax-content { padding: 32px 0 144px 0; @media (min-width: 768px) and (max-width: 979px) { padding-bottom: 65px; } @media (max-width: 767px) { padding-bottom: 65px; } } h2 { color: inherit; margin: 0 0 71px 0; @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 30px; } @media (max-width: 767px) { margin-bottom: 30px; } } } &__style-3 { .parallax-content { padding: 170px 0 241px 0; @media (min-width: 768px) and (max-width: 979px) { padding: 50px 0 70px 0; } @media (max-width: 767px) { padding: 50px 0 70px 0; } } h2 { font-size: 48px; font-weight: 400; line-height: 1.2em; color: @white; margin: 0 0 18px 0; @media (max-width: 767px) { font-size: 30px; } } } &__style-4 { border-top: 1px solid #cecdcd; border-bottom: 1px solid #cecdcd; position: relative; margin: 31px 0 53px 0; &:before, &:after { content: ''; position: absolute; top: -1px; width: 300%; height: 100%; border: inherit; } &:before { left: -299%; } &:after { right: -299%; } } &__style-5 { color: @white; margin: 60px 0 113px 0; @media (max-width: 767px) { margin-bottom: 50px; } .parallax-content { padding: 74px 0 138px 0; } } &__extra-indent1 { margin: 0 0 -1px 0; } &__extra-indent2 { margin-top: 31px !important; } } /* Social Wrapper */ .social-wrapper { ul { margin: 0; overflow: hidden; li { margin-left: 31px; list-style-type: none; float: left; @media (max-width: 767px) { margin-left: 20px; } &:first-child { margin-left: 0; } a { display: block; &:hover, &:active, &:focus { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); .transition(0.4s); } } img { margin: 0; @media (max-width: 767px) { width: 40px; height: auto; } } } } } /*/ Misc */ // Pricing Form #wpcf7-f4432-p2844-o1, #wpcf7-f4666-p2844-o1 { input#staff { padding-left: 1ch; padding-right: 0; width: 100%; } input[type="text"], select { padding-left: 1ch !important; width: 100%; padding-right: 0; &:read-only { font-weight: 500; } } label { font-weight: bold; margin-bottom: -8px; } span + br { display: none; } hr { border-color: #666; margin: 12px 0; } input.wpcf7-form-control.wpcf7-submit { margin-top: 1rem; } input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email { padding-left: 1ch !important; width: 100%; } .span4.offset3 { width: 392px; max-width: 100%; } } @import "bootstrap/less/variables.less"; @import "bootstrap/less/mixins.less"; @import "cv_setup.less";