/* Document : Avenue Stylesheet Created on : May 14, 2014, 8:23:39 PM Author : Bilal Description: Purpose of the stylesheet follows. */ root { display: block; } body{ font-family: 'Source Sans Pro', sans-serif; } h1{ font-size: 30px;line-height: 34px;} h2{ font-size: 26px;line-height: 30px;} h3{ font-size: 22px;line-height: 26px;} .hidden{display: none;} .row{ margin: 0 auto; overflow: hidden; width: 100%; } .center{ text-align: center;} .text-right{ text-align: right;} .text-left{ text-align: left;} .left{ float: left;} .right{ float: right;} .mt20{ margin-top: 20px;} .scale125{ transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); } .scale11{ transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } .transition{ transition: 0.4s all ease; -moz-transition: 0.4s all ease; -webkit-transition: 0.4s all ease; } /*-- Logo --*/ #sc_logo{ max-height: 100px; } /*-- Toolbar --*/ #site-toolbar{ background: #222222; color: #d0d0d0; overflow: hidden; position: fixed; left: 0; /*top: 0;*/ width: 100%; z-index: 999; /*height: 40px;*/ } #site-toolbar .contact-bar a{ height: 30px; margin: 7px 5px; display: inline-block; text-align: center; line-height: 30px; transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -moz-transition: 0.2s all ease; } #site-toolbar .contact-bar a:hover{ } #site-toolbar .contact-bar a .fa{ margin-right: 5px; } #site-toolbar .contact-bar a span{ color: #e0e0e0; } #site-toolbar .social-bar a{ width: 30px; height: 30px; margin: 7px 5px; display: inline-block; text-align: center; line-height: 30px; border: 1px solid #e0e0e0; color: #e0e0e0; border-radius: 100%; transition: 0.2s all ease; -moz-transition: 0.2s all ease; -webkit-transition: 0.2s all ease; } #site-toolbar .row .social-bar{ text-align: right; } .site-branding{ border-top: 8px solid #f5f5f5; border-bottom: 5px solid #f5f5f5; margin-top: 40px; } .site-branding .search-bar{ text-align: right; } .site-branding .search-bar .search-form{ margin-top: 20px; line-height: 20px; } .site-branding .search-bar .search-field{ border-top: 0; border-left: 0; border-right: 0; border-radius: 0; outline-color: #fff; transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; } .site-branding .search-bar .search-field:focus{ padding-right: 20px; color: #222; } .site-branding .col-sm-6{ min-height: 70px; line-height: 70px; } .main-navigation{ border-bottom: 8px solid #f5f5f5; } #site-navigation.main-navigation > .row{ overflow: visible; } /*-- Social --*/ #site-toolbar .row .social-bar a.icon-twitter:hover{ color: #00abdc; border-color: #00abdc; box-shadow: 0 0 2px #00abdc; -moz-box-shadow: 0 0 2px #00abdc; -webkit-box-shadow: 0 0 2px #00abdc; } #site-toolbar .row .social-bar a.icon-facebook:hover{ color: #3b5998; border-color: #3b5998; box-shadow: 0 0 2px #3b5998; -moz-box-shadow: 0 0 2px #3b5998; -webkit-box-shadow: 0 0 2px #3b5998; } #site-toolbar .row .social-bar a.icon-linkedin:hover{ color: #007bb6; border-color: #007bb6; box-shadow: 0 0 2px #007bb6; -moz-box-shadow: 0 0 2px #007bb6; -webkit-box-shadow: 0 0 2px #007bb6; } #site-toolbar .row .social-bar a.icon-gplus:hover{ color: #dd4b39; border-color: #dd4b39; box-shadow: 0 0 2px #dd4b39; -moz-box-shadow: 0 0 2px #dd4b39; -webkit-box-shadow: 0 0 2px #dd4b39; } /*-- 404 --*/ .icon404{ font-size: 54px; line-height: 90px; } /*-- Header --*/ .site-header{ width: 100%; } .site-title{ margin: 0; } .site-description{ font-size: 14px; } /*-- Slider --*/ .sc-slider-wrapper{ margin: 0 auto; overflow: hidden; } .sc-slider { position: relative; width: 100%; overflow: auto; font-size: 18px; line-height: 24px; text-align: center; color: rgba(255,255,255,.6); text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); background: #5b4d3d; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .sc-slider ul { list-style: none; margin: 0; width: 300%; } .sc-slider ul li { display: block; float: left; width: 33%; /*padding: 100px 0 110px;*/ height: 400px; background-repeat: no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -ms-background-size: 100% 100%; background-size: 100% 100%; box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); } .sc-slider ul li .inner{ } .sc-slider h1, .sc-slider h2 { font-size: 40px; line-height: 52px; display: inline-block; left: 20px; padding: 10px 15px; text-align: left; color: #fff; overflow: hidden; background: rgba(50,50,50,0.5); } .sc-slider .btn { display: inline-block; margin: 25px 0 0; padding: 9px 22px 7px; clear: both; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255,255,255,.4); border-radius: 5px; } .sc-slider .btn:hover { background: rgba(255,255,255,.05); } .sc-slider .btn:active { -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); } .sc-slider .btn, .sc-slider .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .sc-slider .dots { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; } .sc-slider .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } .sc-slider .dots li.active { background: #fff; opacity: 1; } /*-- Menu --*/ #site-navigation{ /*background: #222222;*/ } .nav-menu > li a{ margin-right: 15px; padding: 8px 10px; background: #fff; color: #222222; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .main-navigation ul ul{ top: initial; background: #fff; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .menu-toggle{ margin: 0 auto; } /*-- CTA boxes --*/ #site-cta{ overflow: visible; } #site-cta .site-cta{ } .site-cta{ border-left: 1px solid #444; } #site-cta .col-md-12{ margin-top: 55px; } .site-cta .fa{ font-size: 28px; border: 1px solid; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 100%; position: absolute; left: -40px; top: 0; background: #fff; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .site-cta .col-md-10 > div{ position: relative; padding-bottom: 20px; } .site-cta h3{ font-size: 20px; transition: 0.3s all ease; -moz-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; position: relative; font-weight: 600; } .site-cta .col-md-10{ position: relative; } .site-cta .btn{ display: none; } /*-- Top Banner --*/ #top-banner{ padding: 15px 0 0 0; background: #222222 url('../images/left-cross.png'); min-height: 100px; color: #ffffff; } #top-banner .top-banner-text{ font-size: 36px; line-height: 36px; margin-bottom: 20px; font-weight: 200; } /*-- Site Footer --*/ .site-footer{ border-top: 1px solid #2e2e2e; color: #e0e0e0; } .site-footer .site-info{ background: #222222; } .site-footer .footer-boxes{ background: #303030 url('../images/left-cross.png'); } .site-footer .footer-boxes .widget:first-child{ padding-left: 0; } .site-footer .col-md-6{ padding: 20px 10px 20px 0; } .scroll-top{ /*font-size: 26px;*/ width: 30px; height: 30px; margin: 7px 5px; display: inline-block; text-align: center; line-height: 30px; border: 1px solid #e0e0e0; color: #e0e0e0; border-radius: 100%; cursor: pointer; transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; -webkit-transition: 0.2s all ease-in-out; } .scroll-top:hover{ transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); } /*-- page --*/ .page-content{ margin-top: 30px; } .page-title{ background: #222222 url('../images/left-cross.png'); margin-left: -15px; margin-right: -15px; font-size: 32px; color: #e0e0e0; padding: 30px 0; } .page .entry-content{ } .page-content .col-md-9{ overflow: hidden; } /*-- Blog --*/ .blogroll{ margin-top: 20px; } .item-post{ margin-bottom: 15px; border-bottom: 1px solid #e1e1e1; padding-bottom: 10px; } .item-post .post-title{ font-size: 32px; } .item-post .post-thumb{ padding: 15px; } .item-post .post-thumb img{ width: 100%; width: 100%; border: 1px solid #e0e0e0; padding: 5px; } .single-title{ } .single-title > div.row{ padding-left: 30px; } .wp-post-image{ width: 200px; float: left; margin: 0 15px 15px 0; padding: 3px; border: 1px solid #e0e0e0; } /*-- sidebar --*/ .widget-area .search-field{ width: 100%; padding-left: 5px; } .widget-title{ margin-bottom: 0; font-weight: 400; } .widget-area ul{ margin: 0; } .widget-area ul li{ list-style-type: none; padding-left: 0; border-bottom: 1px solid #E6E6E6; } .widget-area ul li a{ font-size: 16px; padding: 7px 0; transition: 0.2s all ease; -moz-transition: 0.2s all ease; -webkit-transition: 0.2s all ease; display: block; } .widget-area ul li a:hover{ } /*-- Responsive --*/ @media(min-width: 1060px){ .row{ width: 1060px; } .row.row1060{ width: 1060px; } } @media(min-width: 1200px){ .row.row1200{ width: 1200px; } } @media(min-width: 601px) and (max-width: 991px){ #site-cta{ margin-top: 0; } #site-cta .site-cta{ margin-left: 30px; } .site-cta .col-md-10 > div{ padding-left: 20px; } #top-banner .top-banner-text{ font-size: 28px; line-height: 30px; } } @media(min-width: 401px) and (max-width: 600px){ #site-cta{ margin-top: 0; } #site-cta .site-cta{ margin-left: 30px; } .site-cta .col-md-10 > div{ padding-left: 20px; } .site-branding{ margin-top: 90px; } #top-banner .top-banner-text{ font-size: 22px; line-height: 24px; } } @media(max-width: 525px){ #site-toolbar .row .social-bar, #site-toolbar .row .contact-bar{ width: 100%; text-align: center; } /* .site-branding{ margin-top: 90px; } */ } @media(min-width: 400px) and (max-width: 526px){ .site-footer{ margin-bottom: 88px; } } @media(min-width: 527px) and (max-width: 600px){ .site-footer{ margin-bottom: 44px; } } @media(max-width: 400px){ .site-branding{ margin-top: 90px; } #top-banner .top-banner-text{ font-size: 22px; line-height: 24px; } .site-footer{ margin-bottom: 88px; } } @media(max-width: 600px){ .site-description{ display: none; } .main-navigation li{ float: none; } .main-navigation ul ul{ display: block; float: none; position: initial; } .main-navigation ul ul a{ width: 100%; padding-left: 30px; } .nav-menu > li a{ background: #222; margin: 0; color: #fff; text-align: center; } #site-navigation .row > div.col-md-12{ padding: 0; } #menu-main{ margin-top: 5px; } #site-toolbar{ /*bottom: 0;*/ display: none; } .site-branding{ margin-top: 0; } }