/*-- Theme Name: theme44910 Theme URI: http://template-help.com/ Description: A theme for Wordpress 3.5.x + from Template-Help.com Collection Author: Template_Help.com Author URL: http://www.Template-Help.com/ Template: CherryFramework Version: 1.2 MotoPress Version: 1.0 --*/ /*import CherryFramework style*/ @import url("../CherryFramework/style.css"); /*Google Fonts*/ @import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,700,300); /* #General ================================================== */ body { padding: 0 !important; } h2 { font-weight: 300 !important; } p { margin-bottom: 1.5em; } .main-holder { overflow: hidden; } /* #Header ================================================== */ .header { background: none; border: none; padding: 0 0 20px 0; @media (max-width: 767px) { padding-left: 20px; padding-right: 20px; } .pull-right, .pull-left { @media (max-width: 767px) { float: none; } } .tail-top { background-color: @white; margin: 0 -100% 20px; padding: 9px 100%; @media (max-width: 767px) { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; text-align: center; } } .contacts { font-size: 11px; a { color: @linkColor; } address, span { margin: 0 29px 0 0; display: inline-block; vertical-align: top; @media (max-width: 767px) { margin-bottom: 5px; } &:before { width: 22px; height: 22px; display: inline-block; vertical-align: top; line-height: 22px; text-align: center; background-color: #f5f5f5; font-family: @FontAwesome; margin-right: 8px; .border-radius(22px); } } address { &:before {content: '\f041';} } .tel { &:before {content: '\f095';} } .mail { &:before {content: '\f0e0';} } } .slogan { font-style: italic; font-size: 12px; line-height: 1.2em; } } /* #Navigation ---------------------------------------- */ .nav { &__primary { margin: 0; } } /* Essential styles for dropdown menu */ .sf-menu li:hover ul, .sf-menu li.sfHover ul { margin-top: 17px; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { margin-top: 0; } /* Our skin for dropdown menu */ .sf-menu > li { background: @white; text-align: center; margin-left: 20px; .ie8 & { margin-left: 12px; } @media (max-width: 1200px) { margin-left: 12px; } @media (min-width: 768px) and (max-width: 979px) { margin-left: 2px; } &:first-child { margin-left: 0 !important; } &:before { position: absolute; left: 0; top: 33px; width: 100%; text-align: center; font-size: 48px; @media (min-width: 768px) and (max-width: 979px) { font-size: 30px; top: 20px; } } &:after { content: ''; position: absolute; left: 50%; margin: -3px 0 0 -5px; top: 0; width: 0px; height: 0px; border-style: solid; border-width: 5px 5px 0 5px; .opacity(0); .transition(0.25s); .ie8 & { display: none; } } /* color 1 */ &.color-1 { color: @blue; &:after, .sf-sub-indicator {border-color: @blue transparent transparent;} a { &:before, &:after {background-color: @blue;} } ul {background-color: @blue;} } /* color 2 */ &.color-2 { color: @linkColor; &:after, .sf-sub-indicator {border-color: @linkColor transparent transparent;} a { &:before, &:after {background-color: @linkColor;} } ul {background-color: @linkColor;} } /* color 3 */ &.color-3 { color: @orange; &:after, .sf-sub-indicator {border-color: @orange transparent transparent;} a { &:before, &:after {background-color: @orange;} } ul {background-color: @orange;} } /* color 4 */ &.color-4 { color: @green; &:after, .sf-sub-indicator {border-color: @green transparent transparent;} a { &:before, &:after {background-color: @green;} } ul {background-color: @green;} } /* color 5 */ &.color-5 { color: @red; &:after, .sf-sub-indicator {border-color: @red transparent transparent;} a { &:before, &:after {background-color: @red;} } ul {background-color: @red;} } } .sf-menu > li > a { padding: 92px 0 0 0; border: none; text-transform: uppercase; color: inherit !important; width: 140px; height: 140px; .box-sizing(border-box); .ie8 & { width: 102px; } @media (max-width: 1200px) { width: 102px; } @media (min-width: 768px) and (max-width: 979px) { width: 89px; height: 99px; padding-top: 60px; font-size: 14px !important; } &:before, &:after { content: ''; position: absolute; left: 0; width: 100%; height: 0; background: @black; z-index: 1; .transition(0.3s); .opacity(0); .ie8 & { display: none; } } &:before { top: 0; } &:after { bottom: 0; } } .sf-menu li li { font-family: @baseFontFamily; background: none; text-align: left; border-bottom: 1px solid rgba(255,255,255,.2); .no-rgba & { background-repeat: repeat-x; background-position: 0 100%; background-image: url(images/divider.png); } } .sf-menu li ul { min-width: 210px; } .sf-menu li li a { padding: 13px 26px; border: none; color: @white; .transition(0.3s); } .sf-menu > li:hover:after, .sf-menu > li.sfHover:after, .sf-menu > li.current-menu-item:after { margin-top: 0; .opacity(100); } .sf-menu > li:hover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.current-menu-item > a { background: none; .ie8 & {text-decoration: underline;} &:after, &:before { height: 6px; .opacity(100); } &:before { top: -6px; } &:after { bottom: -6px; } } .ie8 & { .sf-menu > li.current-menu-item { &:after {display: block;} } .sf-menu > li.current-menu-item > a { text-decoration: none; &:after, &:before {display: block;} } } .sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current-menu-item > a { background: @white; color: @textColor; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 0; } .sf-sub-indicator { right: 50%; margin-right: -5px; background: none; width: 0px; height: 0px; border-style: solid; border-width: 5px 5px 0 5px; } a > .sf-sub-indicator { top: auto; bottom: 14px; } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { right: 0; position: relative; margin: 0 0 1px 8px; display: inline-block; vertical-align: middle; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent @white !important; } .sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current-menu-item > a { .sf-sub-indicator { border-color: transparent transparent transparent @textColor !important; } } .sf-menu ul a > .sf-sub-indicator { top: 0; bottom: 0; } /*/ Header */ /* Logo ---------------------------------------- */ .logo { @media (min-width: 768px) and (max-width: 979px) { width: 269px; } @media (max-width: 767px) { text-align: center; margin-bottom: 20px; background-color: @red; } &_h { &__txt { text-transform: uppercase; } } &_link { font-weight: 300 !important; background-color: @red; width: 370px; height: 140px; line-height: 118px !important; padding: 0 0 0 36px; display: inline-block; .box-sizing(border-box); .inner { display: inline-block; vertical-align: bottom; line-height: 1.2em; } &:hover { color: @white; } } &_tagline { font-family: @OpenSansFontFamily; font-weight: 400 !important; line-height: 1.2em; color: @white; display: inline-block; padding: 0 0 8px 6px; } } /*/ Logo */ /* Slider ================================================== */ .slider-wrap { background-color: @white; overflow: hidden; margin-bottom: 30px; .ie8 & { height: 336px; } } .slider { overflow: visible; width: 68.376%; @media (max-width: 480px) { display: none !important; } } .camera_wrap { margin-bottom: 0 !important; } .slider-wrap .camera_fakehover { background-color: @white; } .cameraSlide { img { margin: 0 !important; } } .camera_caption { width: 370px; right: -370px; height: 100%; background-color: @white; color: @textColor; &.fadeFromRight, &.moveFromRight { right: auto; } .ie8 & { background-color: @white; width: 298px; right: -298px; } @media (max-width: 1200px) { width: 298px; right: -298px; } @media (min-width: 768px) and (max-width: 979px) { width: 229px; right: -229px; } @media (max-width: 767px) { width: 46%; right: -46%; } } .camera_caption > div { background: none; padding: 51px 30px 0 31px; .ie8 & { padding: 28px 20px 0 20px; } @media (max-width: 1200px) { padding: 28px 20px 0 20px; } @media (min-width: 768px) and (max-width: 979px) { padding-top: 16px; } @media (max-width: 767px) { padding: 27% 10px 10px 10px; } } .camera_caption { h4 { font-size: 18px; line-height: 22px; font-weight: bold; color: @linkColor; text-transform: uppercase; border-bottom: 1px solid #e5e5e5; padding-bottom: 16px; margin: 0 0 14px 0; @media (max-width: 979px) { display: none; } } h2 { color: @blue; font-size: 40px; font-weight: 300 !important; line-height: 1.2em; text-transform: uppercase; margin: 0 0 20px 0; .ie8 & { font-size: 32px; margin-bottom: 15px; } @media (max-width: 1200px) { font-size: 32px; margin-bottom: 15px; } @media (min-width: 768px) and (max-width: 979px) { font-size: 24px; margin-bottom: 8px; } @media (max-width: 767px) { font-size: 18px; margin-bottom: 5px; } } p { margin-bottom: 40px; .ie8 & { margin-bottom: 20px; } @media (max-width: 1200px) { margin-bottom: 20px; } @media (min-width: 768px) and (max-width: 979px) { font-size: 13px; margin-bottom: 15px; } @media (max-width: 767px) { height: 40px; overflow: hidden; } } .btn { .ie8 & { padding: 8px 16px 9px !important; font-size: 15px !important; } @media (max-width: 1200px) { padding: 8px 16px 9px !important; font-size: 15px !important; } @media (min-width: 768px) and (max-width: 979px) { padding: 5px 14px 6px !important; font-size: 13px !important; } @media (max-width: 767px) { display: none; } } [class^="icon-"], [class*=" icon-"] { width: 18px; height: 18px; line-height: 15px; border: 2px solid #e5e5e5; margin-right: 9px; float: left; display: block; vertical-align: top; text-align: center; .border-radius(22px); &:before { font-size: 14px; line-height: 1.2em; color: #e5e5e5; width: auto; } } } .camera_target_content { overflow: visible; } .camera_wrap { .camera_pag { position: absolute; right: -355px; bottom: 15px; width: 370px; height: 18px; .ie8 & { width: 298px; right: -278px; } @media (max-width: 1200px) { width: 298px; right: -278px; } @media (min-width: 768px) and (max-width: 979px) { bottom: 10px; right: -219px; width: 229px; } @media (max-width: 767px) { width: 46%; right: -42%; } .camera_pag_ul { text-align: right; li { margin: 0 0 0 9px; width: 14px; height: 14px; background: none; border: 2px solid #e5e5e5; .transition(0.3s); .border-radius(18px); span { display: none; } &:hover { background: #e5e5e5; } &.cameracurrent { border-color: @blue; background: @blue !important; } } } } } /* #Content ================================================== */ .content-holder { padding-bottom: 30px; @media (max-width: 767px) { padding-left: 20px; padding-right: 20px; } } #content { background-color: @white; padding: 15px 0 50px 0; .page-template-page-fullwidth-php & { background: none; padding: 0; .type-page { h2 { margin-bottom: 20px; } } } .page-template-page-Portfolio2Cols-filterable-php &, .page-template-page-Portfolio3Cols-filterable-php &, .page-template-page-Portfolio4Cols-filterable-php & { padding-left: 30px; padding-right: 30px; .ie8 & { padding-left: 20px; padding-right: 20px; } @media (max-width: 1200px) { padding-left: 20px; padding-right: 20px; } } .single-portfolio & { padding-left: 30px; padding-right: 30px; .ie8 & { padding-left: 20px; padding-right: 20px; } @media (max-width: 1200px) { padding-left: 20px; padding-right: 20px; } .nocomments { padding-top: 15px; padding-left: 0; padding-right: 0; } .single-pager { margin-left: 0; margin-right: 0; } #respond { h3 { padding-left: 0; padding-right: 0; } } #commentform { padding-left: 0; padding-right: 0; } .comments-h { padding-top: 15px; padding-left: 0; padding-right: 0; } .comment-list { padding-left: 0; padding-right: 0; } } .error404 & { padding: 0; } } /* 404 Error Page ---------------------------------------- */ .error404-holder { &_num { color:@linkColor; }//404 number &_txt { padding-right: 30px; @media (max-width: 767px) { padding: 0 20px; } } }//404 holder /* Title ---------------------------------------- */ .title-section { padding: 20px 30px; background-color: @white; margin-bottom: 30px; overflow: hidden; .ie8 & { margin-bottom: 19px; padding-left: 20px; padding-right: 20px; } @media (max-width: 1200px) { margin-bottom: 20px; padding-left: 20px; padding-right: 20px; } } .title-header { font-size: 24px; font-weight: 300 !important; overflow: visible; line-height: 1.2em; margin: 0 0 5px 0; } .title-desc { display: block; color: #999; font-size: 11px; } /* Breadcrumb ---------------------------------------- */ .breadcrumb__t { margin: 0; padding: 0; background: none; & .divider { margin: 0 5px; } & li a { .transition(0.3s); } } /* /Breadcrumb */ /* #Post ================================================== */ .post { &__holder { &.type-skills { padding: 0 30px; .ie8 & { padding: 0 20px; } @media (max-width: 1200px) { padding: 0 20px; } } &.type-clients { padding: 0 30px; .ie8 & { padding: 0 20px; } @media (max-width: 1200px) { padding: 0 20px; } .featured-thumbnail { float: left; margin-right: 20px; } } } padding: 0 30px; .ie8 & { padding-left: 20px; padding-right: 20px; } @media (max-width: 1200px) { padding-left: 20px; padding-right: 20px; } &-title { margin-bottom: 23px; #content & { font-size: 24px; font-weight: 300 !important; } a { .transition(0.3s); } } &_meta { border-color: #dcdcdc; padding: 12px 0 !important; a { .transition(0.3s); } & span { display: inline-block; line-height: 20px; padding-right: 15px; @media (max-width: 767px) { display: block; } } & .post_permalink { float: right; @media (max-width: 1200px) { float: none; } } .post_author { a { text-transform: capitalize; } } & i { font-size: 16px; margin-right: .5em; color: #b5b5b5; } & .pull-right { padding-right: 0; padding-left: 15px; } }//post_meta &_content { .excerpt { margin-bottom: 1.4em; } } } article { .search-results & { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } } /* Posts navigation ---------------------------------------- */ .pagination__posts { margin: 0; text-align: center; & ul { .box-shadow(none); & li { & a { .transition(0.3s); .border-radius(0px) !important; } } & .active { & a { } } } } /* /Posts navigation */ /* Share buttons */ .share-buttons { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } /*/ Share buttons */ /* Author Page ---------------------------------------- */ .post-author { margin: 0 30px 2em; padding:5px 20px 20px; border:none; background: #e9e9e9; @media (max-width: 1200px) { margin: 0 20px; } &_h { font-size: 36px; line-height: 1.2em; font-weight: 300 !important; small { font-size: 1em; font-weight: 300; } a { text-transform: capitalize; } } &_link { margin-top:1.5em; } &_gravatar { float: left; margin: 5px 20px 10px 0; & img { padding:0; border:none; background:none; } } &_desc { } } /* Recent author posts */ #recent-author-posts { h3 { padding: 0 30px; font-size: 36px; font-weight: 300 !important; line-height: 1.2em; @media (max-width: 1200px) { padding: 0 20px; } } } /* Recent author comments */ #recent-author-comments { padding: 0 30px; padding-top: 30px; @media (max-width: 1200px) { padding: 0 20px; } h3 { font-size: 36px; font-weight: 300 !important; line-height: 1.2em; } } /* Related Posts */ .related-posts { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } &_h { font-size: 36px; line-height: 1.2em; font-weight: 300 !important; margin-bottom: 20px; } &_item { font-size: 18px; line-height: 1.2em; } } /*/ Related Posts */ .nocomments { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } /* FAQs Page ---------------------------------------- */ .faq-list { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } .page-template-page-archives-php { .post-content { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } } /* Testimonials Page ---------------------------------------- */ .testimonial { position: relative; padding:30px; margin: 0 30px; margin-bottom:35px; border:none; background:#e9e9e9; font-style:italic; font-family:@serifFontFamily; line-height:1.5em; .border-radius(0px); @media (max-width: 1200px) { margin: 0 20px; } & small { font-family: @baseFontFamily; font-size: 1em; } } /* Page Header */ .page-header { margin: 11px 30px 18px; border: none; padding: 0; .team-holder & { margin-left: 0; margin-right: 0; } .ie8 & { margin-left: 20px; margin-right: 20px; } @media (max-width: 1200px) { margin-left: 20px; margin-right: 20px; } h1 { font-size: 24px; font-weight: 300 !important; line-height: 1.2em; margin: 0; } } /* Single Pager */ .single-pager { margin-top: 0; margin-left: 30px; margin-right: 30px; .ie8 & { margin-left: 20px; margin-left: 20px; } @media (max-width: 1200px) { margin-left: 20px; margin-right: 20px; } } /* Filterable Portfolio ---------------------------------------- */ .filter-wrapper { .pull-right { @media (max-width: 480px) { float: none; } } strong { display: inline-block; padding: 8px 0; margin-right: 5px; float: left; @media (max-width: 480px) { padding: 5px 0 0 0; } } .nav { overflow: hidden; } } .nav-pills { float: left; @media (max-width: 480px) { float: none; } li { @media (max-width: 480px) { float: none; } a { .border-radius(0px); @media (max-width: 480px) { display: block; padding: 5px; } } } } .filterable-portfolio { } /*/ Content */ /* #Comments ================================================== */ /* Comment Heading */ .comments-h { padding: 0 30px; margin-bottom: 0; font-size: 36px; font-weight: 300 !important; line-height: 1.2em; @media (max-width: 1200px) { padding: 0 20px; } } /* Comment List */ .comment-list { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } .comment .comment-body { margin-top: 10px; border: none; background: #e9e9e9; } .comment.bypostauthor .comment-body { background: #e9e9e9; } .comment-author .author { display: block; padding-top: 6px; width:59px; text-align:center; text-transform:capitalize; font-weight: 400; font-size:14px; } #respond { & h3 { padding: 0 30px; font-size: 36px; line-height: 1.2em; font-weight: 300 !important; margin-bottom: 20px; @media (max-width: 1200px) { padding: 0 20px; } } } #cancel-comment-reply-link { padding-left: 30px; .ie8 & { padding-left: 20px; } @media (max-width: 1200px) { padding-left: 20px; } } /* Comment form */ #commentform { padding: 0 30px; input[type="text"] { padding: 7px 16px; } @media (max-width: 1200px) { padding: 0 20px; } } /*/ Comments */ /* #Widgets ================================================== */ #sidebar { padding: 0; .widget { background-color: @white; margin-bottom: 30px; padding: 31px 20px 30px 20px; @media (max-width: 1200px) { margin-bottom: 20px; padding-left: 20px; padding-right: 20px; } h3 { margin-top: 0; margin-bottom: 25px; font-size: 24px; font-weight: 300 !important; } ul { margin-left: 0; li { list-style-type: none; margin-bottom: 11px; &:before { content: '\f061'; font-family: @FontAwesome; font-size: 12px; color: #dedede; display: inline-block; vertical-align: top; margin-right: 12px; width: 16px; height: 16px; border: 2px solid #dedede; text-align: center; line-height: 16px; .border-radius(16px); } a { color: @textColor; } } ul { margin-top: 11px; margin-left: 30px; } } } } /* Search Form ---------------------------------------- */ .search-form { &_it { .error404 & { @media (max-width: 480px) { width: 100%; height: 36px; .box-sizing(border-box); } } } } /* /Search Form */ /* Custom Widgets ---------------------------------------- */ /* Social Networks ---------------------------------------- */ .social { li { &:before { display: none !important; } } } /* /Social Networks */ /* Custom Recent Comments */ .comments-custom { & li { margin-bottom: 0 !important; padding-bottom: 0; &:before { display: none !important; } } } /*/ Custom Recent Comments */ /* Banners widget ---------------------------------------- */ .banners { margin-bottom: 30px; background-color: @white; padding: 31px 20px 30px 20px; @media (max-width: 1200px) { margin-bottom: 20px; padding-left: 20px; padding-right: 20px; } } /*/ Banners widget */ /* Standard Widgets ---------------------------------------- */ /* Calendar */ #wp-calendar thead th { background:#e7e7e7; } /*/ Calendar */ /* Tag Cloud */ .tagcloud { a { font-size: 13px !important; line-height: 26px; color: @white; background-color: @blue; padding: 0 10px; margin: 0 5px 8px 0; display: inline-block; vertical-align: top; .transition(0.3s); &:hover { background-color: @white; color: @blue; text-decoration: none; } } } /*/ Tag Cloud */ /* Custom Widgets ---------------------------------------- */ /* Posts List */ .post-list { & li { padding: 0; .widget & { margin-bottom: 20px !important; } &:before { content: '\f061'; float: left; display: block; color: @white; font-size: 12px; font-family: @FontAwesome; line-height: 16px; text-align: center; width: 16px; height: 16px; border: 2px solid @white; margin: 0 11px 10px 0; .border-radius(16px); .widget & { display: none !important; } } } .featured-thumbnail { @media (max-width: 979px) { float: none; margin-right: 0; } } &_h { font-size: 13px; line-height: 20px; margin: 0; .widget & { font-size: 18px; line-height: 22px; margin-bottom: 5px; } a { color: @linkColor; .transition(0.3s); .widget & { color: @redLight !important; } &:hover { color: @white; text-decoration: none; .widget & { color: @black !important; } } } } time { font-size: 12px; color: #b6bcc2; font-style: italic; } .btn { background: @redLight !important; border-color: @redLight !important; &:hover { color: @redLight !important; } } } /*/ Posts List */ /* Flickr widget */ .flickr { &_li { float: left; width: 80px; margin: 0 15px 15px 0; .ie8 & { width: 63px; } @media (max-width: 1200px) { width: 63px; } @media (min-width: 768px) and (max-width: 979px) { width: 75px; &:nth-child(2n) { margin-right: 0 !important; } } &.nomargin { margin-right: 0 !important; @media (min-width: 768px) and (max-width: 979px) { margin-right: 15px !important; &:nth-child(2n) { margin-right: 0 !important; } } @media (max-width: 767px) { margin-right: 15px !important; } } } &_li .thumbnail { margin: 0; display: block; text-decoration: none; position: relative; &:before { content: '\f08e'; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: @linkColor; color: @white; font-size: 24px; font-family: @FontAwesome; line-height: 80px; text-align: center; .opacity(0); .scale(0); .transition(0.4s); .ie8 & { line-height: 63px; } @media (max-width: 1200px) { line-height: 63px; } @media (min-width: 768px) and (max-width: 979px) { line-height: 75px; } } &:hover { &:before { .opacity(100); .scale(1); } img { z-index: -1; } } > img { margin: 0; width: 80px; height: 80px; .ie8 & { position: relative; width: 63px; height: 63px; } @media (max-width: 1200px) { width: 63px; height: 63px; } @media (min-width: 768px) and (max-width: 979px) { width: 75px; height: 75px; } } } /* IE8 */ .ie8 &_li.nomargin { margin-right: 15px; } .ie8 &_li img { height: auto; } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { &_li { float: left !important; width: auto !important; margin: 0 14px 14px 0; } } } /*/ Flickr widget */ /*/ Widgets */ /* #Shortcodes ================================================== */ /* Testimonials ---------------------------------------- */ .testimonials { & .testi-item { overflow:hidden; margin: 2em 0 0 0; padding: 0; background: none; &:first-child { margin-top: 0; } & blockquote { position: relative; display: block; margin: 0; padding: 0; border:none; background: none; .border-radius(10px); .background-clip(padding-box); &:before { display: none; } &:after { display: none; } & > a { position: relative; z-index: 2; color: @textColor; text-decoration: none; overflow: hidden; vertical-align: top; .transition(0.3s); } & > a:hover { color: @black; } }//blockquote tag & .featured-thumbnail { position:relative; z-index:2; margin:0 20px 0 10px; width: 120px; height: 120px; @media (max-width: 979px) { float: none; margin-right: 0; overflow: hidden; } } & .testi-meta { font-size: 1em; display: block; padding-top: 22px; padding-left: 0; text-align: right; } }//Testimonial } /*/ Testimonials */ /* Services Box ---------------------------------------- */ .service-box { padding: 27px 30px 30px 32px; border: none; font-family: @baseFontFamily; display: block !important; color: @white; .border-radius(0px); .box-shadow(none); .ie8 & { padding-left: 25px; padding-right: 25px; } @media (max-width: 1200px) { padding-left: 25px; padding-right: 25px; } @media (min-width: 768px) and (max-width: 979px) { padding: 20px; } @media (max-width: 767px) { margin-bottom: 20px; padding: 15px; } &.color-1 { background-color: @green; &.extra-btn { .btn { &:hover { &:before {color: @green;} } } } } &.color-2 { background-color: @redLight; &.extra-btn { .btn { &:hover { &:before {color: @redLight;} } } } } &.color-3 { background-color: @orange; &.extra-btn { .btn { &:hover { &:before {color: @orange;} } } } } .icon { float: none; margin: 0; i { font-family: @FontAwesome; font-size: 72px; color: @white; .ie8 & { font-size: 60px; } @media (max-width: 1200px) { font-size: 60px; } @media (min-width: 768px) and (max-width: 979px) { font-size: 45px; } @media (max-width: 767px) { font-size: 40px; float: left; margin-right: 10px; position: relative; top: 8px; } } } h2 { font-size: 32px; line-height: 1.2em; color: @white; margin: 17px 0 24px 0; .ie8 & { font-size: 28px; } @media (max-width: 1200px) { font-size: 28px; } @media (min-width: 768px) and (max-width: 979px) { font-size: 23px; margin-bottom: 18px; } @media (max-width: 767px) { margin-bottom: 10px; } } &_txt { line-height: 20px; @media (max-width: 767px) { margin-bottom: 10px; } } &.extra-btn { .btn { width: 41px; padding: 41px 0 0 0; height: 0; overflow: hidden; border: 2px solid @white !important; background: none !important; position: relative; .border-radius(41px); .transition(0.3s); &:hover { background: @white !important; &:before { left: 0; } &:after { left: 50px; } } &:before, &:after { content: '\f061'; width: 42px; font-size: 24px; font-family: @FontAwesome; line-height: 41px; color: @white; text-align: center; position: absolute; top: 0; .transition(0.3s); } &:before { left: -50px; } &:after { left: 0; color: @white; } } } } /* Box */ .content_box { background-color: @white; background-repeat: no-repeat; background-position: 30px 100%; overflow: hidden; padding: 16px 30px 32px 30px; .ie8 & { padding-left: 20px; padding-right: 20px; } @media (max-width: 1200px) { padding-left: 20px; padding-right: 20px; } h2 { margin-bottom: 20px; } &.alt { min-height: 320px; padding: 34px 20px 0 400px; @media (max-width: 979px) { padding-left: 20px; background-image: none !important; } h2 { font-size: 36px; line-height: 1.2em; margin-bottom: 36px; } } } /* Posts Grid -----------------------------------------*/ .posts-grid { &.latest_projects { overflow: hidden; li { float: left; width: 264px; margin: 0 18px 0 0; overflow: hidden; .ie8 & { width: 210px; margin-right: 20px; } @media (min-width: 980px) and (max-width: 1200px) { width: 210px; margin-right: 20px; } @media (min-width: 768px) and (max-width: 979px) { width: 156px; } @media (max-width: 767px) { width: 47%; margin: 0 5% 20px 0; max-width: 264px; &:nth-child(4n) { margin-right: 4%; } &:nth-child(2n) { margin-right: 0; } } @media (max-width: 550px) { width: auto; float: none; margin: 0 0 20px 0; } &:nth-child(4n) { margin-right: 0; } &.nomargin { margin-right: 0; } } .post_meta { border: none; padding: 0 !important; color: @white; font-size: 11px; } .featured-thumbnail { .ie8 & { width: 210px; height: auto; } @media (max-width: 1200px) { width: 210px; height: auto; } @media (min-width: 768px) and (max-width: 979px) { width: 156px; height: auto; } @media (max-width: 767px) { width: 100%; height: auto; } } } &.team { margin-top: -25px; li { margin-bottom: 0; margin-top: 25px; } .featured-thumbnail { .ie8 & { width: 210px; } img { .ie8 & { width: auto; } } } h5 { font-size: 18px; font-weight: normal; line-height: 1.2em; a { .transition(0.3s); } } .excerpt { margin-bottom: 0; } } } /* entire container, keeps perspective */ .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .flip-container:hover .front, .flip-container.hover .front { .opacity(0); h5 { .ie8 & { z-index: -1; } } } .flip-container:hover .back, .flip-container.hover .back { .opacity(100); } .flip-container, .front, .back { width: 264px; height: 248px; .ie8 & { width: 215px; height: 197px; } @media (max-width: 1200px) { width: 215px; height: 197px; } @media (min-width: 768px) and (max-width: 979px) { width: 156px; height: 147px; } @media (max-width: 767px) { width: 100%; height: 197px; } } /* flip speed goes here */ .flipper { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; .transition(0.6s); position: relative; } /* hide back of pane during swap */ .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; top: 0; left: 0; .transition(0.3s); } /* front pane, placed above back */ .front { h5 { position: absolute; left: 0; bottom: 31px; color: @white; background-color: @orange; margin: 0; padding: 5px 11px 7px; z-index: 3; @media (min-width: 768px) and (max-width: 979px) { bottom: 20px; } } .featured-thumbnail { img { .ie8 & { width: auto; } @media (max-width: 767px) { width: 264px; height: 100%; } } } } /* back, initially hidden pane */ .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); background-color: @orange; color: #ffedda; font-size: 12px; .opacity(0); .ie8 & { height: 198px; } .inner { padding: 33px 24px 0 28px; .ie8 & { padding-top: 25px; } @media (max-width: 1200px) { padding-top: 25px; } @media (min-width: 768px) and (max-width: 979px) { padding: 15px; } } h5 { margin: 0 0 -2px 0; line-height: 1.2em; color: @white; @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 0; } } .post_meta { @media (min-width: 768px) and (max-width: 979px) { display: none; } } .excerpt { line-height: 18px; margin-bottom: 21px; .ie8 & { height: 53px; overflow: hidden; } @media (max-width: 1200px) { height: 53px; overflow: hidden; } @media (min-width: 768px) and (max-width: 979px) { margin-bottom: 15px; } } .btn { background: #b06d00 !important; border: none !important; font-size: 12px; padding: 5px 15px; &:hover { background: @white !important; color: #b06d00; } } } /**/ /* Recent Posts Shortcodes ---------------------------------------- */ /* Recent Posts Default */ .recent-posts { &.skills { overflow: hidden; margin: 0 !important; li { width: 333px; float: left; margin: 0 72px 31px 0; &:nth-child(2n) { margin-right: 0; } &.nomargin { margin-right: 0; } .ie8 & { width: 235px; margin-right: 25px; } @media (max-width: 1200px) { width: 235px; margin-right: 25px; } @media (min-width: 768px) and (max-width: 979px) { width: 328px; } @media (max-width: 767px) { width: 46%; margin-right: 4%; } @media (max-width: 480px) { width: auto; margin-right: 0; } &.green { &:before { color: @green; border-color: @green; } &:hover { &:before { background: @green; } } h5 { a {color: @green;} } } &.blue { &:before { color: @blue; border-color: @blue; } &:hover { &:before { background: @blue; } } h5 { a {color: @blue;} } } &.red { &:before { color: @redLight; border-color: @redLight; } &:hover { &:before { background: @redLight; } } h5 { a {color: @redLight;} } } &.orange { &:before { color: @orange; border-color: @orange; } &:hover { &:before { background: @orange; } } h5 { a {color: @orange;} } } &:hover { &:before {color: @white;} } &:before { font-size: 24px; width: 38px; height: 38px; line-height: 38px; text-align: center; border-width: 2px; border-style: solid; float: left; margin: 0 18px 10px 0; .border-radius(38px); .transition(0.3s); } } h5 { font-size: 18px; line-height: 1.2em; font-weight: 400 !important; margin: 5px 0 5px 0; a { .transition(0.3s); &:hover { text-decoration: none; color: @black !important; } } } .excerpt { font-family: @baseFontFamily; margin-bottom: 0; } } &.clients { margin: -20px 0 0 0 !important; @media (max-width: 480px) { margin-top: 0 !important; } li { float: left; width: 264px; margin: 17px 18px 0 0; @media (max-width: 480px) { margin-top: 0; } &:nth-child(4n) { margin-right: 0; } &.nomargin { margin-right: 0; } .ie8 & { width: 210px; } @media (max-width: 1200px) { width: 210px; } } h5 { display: none !important; } .featured-thumbnail { margin: 0; float: none; .opacity(30); &:hover { .opacity(100); } } } } /*/ Shortcodes */ /* #Footer ================================================== */ .footer { background: none; border: none; overflow: hidden; padding: 0; @media (max-width: 767px) { padding: 0 20px; } } /* Footer widget */ .footer-widgets { margin: 0 -100%; padding: 38px 100% 45px; background-color: #3c474d; font-size: 13px; line-height: 20px; color: #b6bcc2; @media (max-width: 767px) { padding-top: 25px; padding-bottom: 25px; } @media (max-width: 480px) { margin-left: -20px; margin-right: -20px; padding-right: 20px; padding-left: 20px; } &_h { color: @white; font-size: 18px; line-height: 1.2em; margin: 0 0 22px 0; @media (max-width: 767px) { margin-top: 15px; } } .textwidget { padding-right: 26px; } } /* Footer navigation */ nav.footer-nav { margin-bottom: 0; ul { li { a { .transition(0.3s); &:hover { color: @linkColor; text-decoration: none; } } &.current_page_item { a { color: @linkColor; text-decoration: none; } } } } } /* Copyright */ .copyright { margin: 0 -100%; padding: 23px 100%; background-color: #282f33; color: @white; font-size: 12px; @media (max-width: 480px) { margin-left: -20px; margin-right: -20px; padding-right: 20px; padding-left: 20px; } a { color: @white; .transition(0.3s); &:hover { text-decoration: none; color: @linkColor; } } } /* Footer text */ .footer-text { @media (max-width: 767px) { margin-bottom: 5px; } .site-name { text-transform: uppercase; } } /*/ Footer */ /* #Misc ================================================== */ /* Contact form */ .wpcf7-form p.field input { .ie8 & { height: 30px; } } /* Google Map */ .google-map { background-color: @white; font-size: 0; line-height: 0; } /* Horizontal Rule */ .hr { background: #c8c8c8; } .sm_hr { margin: 0 0 10px; background: #c8c8c8; } /* List styling */ .list.styled.arrow2-list { > ul { margin-bottom: 20px; li { margin-bottom: 9px; &:before { content: '\f061'; display: inline-block; color: #dedede; font-size: 12px; font-family: @FontAwesome; line-height: 16px; text-align: center; width: 16px; height: 16px; border: 2px solid #dedede; margin: 0 11px 0 0; .border-radius(16px); } a { .transition(0.3s); } } } } /* Forms */ 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: 7px 16px; border-color: #e9e9e9; background-color: #e9e9e9; .border-radius(0px); .box-shadow(none); .transition(0.3s); &:focus { background: none; border-color: @green; .box-shadow(none); } } input[type="reset"], input[type="submit"] { height: 36px; line-height: 1.2em; border-color: @green !important; background: @green !important; &:hover { color: @green !important; } } /* Back to Top */ #back-top { margin-bottom: 0; &-wrapper { right: 26px; bottom: 97px; } a { width: 41px; color: @linkColor; border: 2px solid @linkColor; .border-radius(41px); &:hover { background-color: @linkColor; span { &:before { top: -50px; } &:after { top: 0; } } } &:hover { span { background: none; } } } span { margin-bottom: 0; width: 41px; height: 41px; background: none; position: relative; overflow: hidden; .border-radius(41px); &:before, &:after { content: '\f062'; font-size: 24px; font-family: @FontAwesome; line-height: 41px; position: absolute; left: 0; width: 40px; text-align: center; .transition(0.6s); } &:before { top: 0; color: @linkColor; } &:after { top: 50px; color: @white; } } } /*// Back to Top */ /* Thumbnail */ .thumbnail { border: none; padding: 0; .border-radius(0px); .box-shadow(none); } /* Button */ .btn { background: @blue !important; border: 1px solid @blue !important; text-shadow: none; text-transform: capitalize; color: @white !important; .border-radius(0px); .box-shadow(none); .transition(0.3s); &:hover { background: transparent !important; color: @blue !important; } &-large { font-size: 18px !important; padding: 11px 22px 12px !important; } } .no-results { padding: 0 30px; @media (max-width: 1200px) { padding: 0 20px; } } /*/ Misc */ @import "bootstrap/less/variables.less"; @import "bootstrap/less/mixins.less";