| /* ---------------------------------= */ |
| /* Import |
| ----------------------------------- */ |
| |
| @import url("fancybox.css"); /* FancyBox Styles */ |
| |
| |
| /* ---------------------------------= */ |
| /* Header |
| ----------------------------------- */ |
| #header {min-height: 60px;} |
| |
| /* Logo / Tagline |
| ------------------*/ |
| #logo { |
| margin-top: 22px; |
| } |
| |
| #logo a img{float: left;} |
| |
| |
| /* Top Right |
| ---------------------------------------------------------------*/ |
| #contact-top { |
| float: right; |
| display: block; |
| background-position: 0 -38px; |
| opacity: .5; |
| filter: alpha(opacity = 50); |
| } |
| |
| #contact-top a:hover { |
| opacity: 1; |
| filter: alpha(opacity = 100); |
| } |
| |
| |
| /* Main Navigation |
| ---------------------------------------------------------------*/ |
| .selectnav { |
| display: none; |
| cursor: pointer; |
| width: 100%; |
| padding: 8px; |
| height: 37px; |
| float: left; |
| font-size: 14px; |
| margin: 15px 0; |
| } |
| |
| #navigation { |
| background: #333; |
| display: block; |
| width: 100%; |
| float: left; |
| max-height: 60px; |
| margin: 0 0 25px 0; |
| position: relative; |
| } |
| |
| #navigation ul, |
| #navigation li { |
| list-style:none; |
| padding:0; |
| margin:0; |
| display:inline; |
| } |
| #navigation ul li{ |
| float:left; |
| position:relative; |
| background: url(../images/nav-divider.png) repeat-y right; |
| line-height: 30px; |
| } |
| |
| #navigation ul li a { |
| font-family: 'Carrois Gothic', sans-serif; |
| display: inline-block; |
| color: #fff; |
| text-decoration: none; |
| font-size: 14px; |
| padding: 15px 25px; |
| margin-bottom: 1px; |
| text-transform: uppercase; |
| |
| } |
| |
| #navigation ul li a:hover { |
| background: #000; |
| color: #fff; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| #navigation ul li a.active { |
| background: #222; |
| color: #fff; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| |
| #navigation ul li a.download { |
| background: #fa5b0f; |
| color: #fff; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| #navigation ul li a.download:hover { |
| color: #fff; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| background-color: #FB8146; |
| } |
| |
| #navigation ul ul { |
| position: absolute; |
| display: none; |
| top: 60px; |
| left: 0; |
| background: #303030; |
| z-index: 999; |
| } |
| #navigation ul ul li{line-height: 20px;} |
| #navigation ul ul li a {color: #f2f2f2;} |
| #navigation ul ul li a:hover { |
| color: #fff; |
| } |
| |
| #navigation ul ul li a { |
| display: block; |
| width: 150px; |
| margin: 0; |
| padding: 9px 18px; |
| font-weight: normal; |
| font-size: 12px; |
| border-bottom: 1px solid #404040; |
| background: none; |
| } |
| |
| #navigation ul ul ul { |
| position: absolute; |
| top:0px; |
| left:100%; |
| z-index: 999; |
| } |
| |
| #navigation ul ul ul li a { |
| border-bottom: 1px solid #404040 !important; |
| border-top: 1px solid transparent; |
| background: none; |
| } |
| |
| #navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {border-bottom: 1px solid transparent} |
| #navigation ul ul ul li:last-child a {border-bottom: 1px solid transparent !important} |
| #navigation ul li:hover>ul {opacity: 1; position:absolute; top:99%; left:0;} |
| #navigation ul ul li:hover>ul {position:absolute; top:0; left:100%; opacity: 1; z-index:497;} |
| #navigation ul li:hover > a {background: #000;} |
| #navigation ul ul li:hover > a {color: #fff;} |
| |
| /* Menu Shadow */ |
| .nav-shadow { |
| width: 100%; |
| height: 27px; |
| background: url(../images/nav-shadow.png) no-repeat center top; |
| background-size: 100% 100%; |
| position: absolute; |
| bottom: -2px; |
| } |
| |
| /* ---------------------------------= */ |
| /* Flexslider |
| ----------------------------------- */ |
| |
| /* Browser Resets |
| ------------------*/ |
| .flex-container a:active, |
| .flexslider a:active, |
| .flex-container a:focus, |
| .flexslider a:focus {outline: none;} |
| .slides, |
| .flex-control-nav, |
| .flex-direction-nav {margin: 0; padding: 0; list-style: none;} |
| |
| |
| /* Necessary Styles |
| ------------------*/ |
| .flexslider {margin: 0; padding: 0;} |
| |
| /* Hide the slides before the JS is loaded. Avoids image jumping */ |
| .flexslider .slides > li {position: relative; zoom: 1; display: none; -webkit-backface-visibility: hidden; padding-left: 0;} |
| .flexslider .slides img {width: 100%; display: block;} |
| .flex-pauseplay span {text-transform: capitalize;} |
| |
| /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ |
| .flexslider {position: relative; zoom: 1; z-index: 50;} |
| |
| /* Clearfix for the .slides element */ |
| .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} |
| html[xmlns] .slides {display: block;} |
| * html .slides {height: 1%;} |
| |
| /* No JavaScript Fallback */ |
| /* If you are not using another script, such as Modernizr, make sure you |
| * include js that eliminates this class on page load */ |
| .no-js .slides > li:first-child {display: block;} |
| |
| |
| /* Default Styles |
| ------------------*/ |
| .flexslider { |
| background: #fff; |
| zoom: 1; |
| } |
| |
| .ie7 .flexslider {margin-bottom: -30px;} |
| |
| .flex-viewport {max-height: 2000px;} |
| .loading .flex-viewport {max-height: 300px;} |
| .flexslider .slides {zoom: 1;} |
| |
| |
| /* Direction Nav |
| ------------------*/ |
| |
| .flex-direction-nav a { |
| width: 80px; |
| height: 80px; |
| display: block; |
| background-color: #000; |
| bottom: 45%; |
| right: 1%; |
| float: none; |
| position: absolute; |
| cursor: pointer; |
| text-indent: -9999px; |
| background-color: #222; |
| background: rgba(0, 0, 0, 0.65); |
| *bottom: 50px; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| opacity: .5; |
| } |
| |
| .flex-direction-nav .flex-next { |
| background: url(../images/ctrl-buttons.png) no-repeat -80px 0; |
| } |
| |
| .flex-direction-nav .flex-prev { |
| background: url(../images/ctrl-buttons.png) no-repeat 0 0; |
| left: 1%; |
| } |
| |
| .flex-direction-nav .flex-prev:hover, |
| .flex-direction-nav .flex-next:hover { |
| |
| opacity: 1; |
| } |
| |
| .subpage .flex-direction-nav a {bottom: 0px; right: 0px; *bottom: 30px;} |
| |
| |
| /* Control Nav |
| ------------------*/ |
| .flex-control-nav { |
| width: 100%; |
| position: absolute; |
| bottom: -30px; |
| text-align: center; |
| } |
| |
| .flex-control-nav li { |
| margin: 0 3px 0 0; |
| display: inline-block; |
| zoom: 1; |
| *display: inline; |
| } |
| |
| .flex-control-paging li a { |
| width: 14px; |
| height: 14px; |
| display: block; |
| background: #c8c8c8; |
| cursor: pointer; |
| text-indent: -9999px; |
| -webkit-border-radius: 20px; |
| -moz-border-radius: 20px; |
| -o-border-radius: 20px; |
| border-radius: 20px; |
| } |
| |
| .flex-control-paging li a:hover, |
| .flex-control-paging li a.flex-active { |
| background: #505050; |
| } |
| |
| .flex-control-paging li a.flex-active { |
| cursor: default; |
| } |
| |
| |
| /* Caption |
| ------------------*/ |
| .slide-caption { |
| |
| padding: 10px; |
| position: absolute; |
| display: block; |
| width: 30%; |
| bottom: 1px; |
| right:1px; |
| background-color: #fff; |
| } |
| |
| .slide-caption.n {background-color: #222; background: rgba(0, 0, 0, 0.6);} |
| |
| .slide-caption h3 { |
| color: #999; |
| font-size: 16px; |
| padding-bottom: 10px; |
| margin:0; |
| line-height: 22px; |
| } |
| |
| .slide-caption p { |
| margin:0; |
| line-height: 19px; |
| color: #bbb; |
| } |
| |
| /* ---------------------------------= */ |
| /* Miscellaneous Styles |
| ----------------------------------- */ |
| .ie-dropdown-fix { position: relative; z-index: 55;} |
| |
| /* Staff Page / About Us |
| ------------------*/ |
| .staff { |
| padding: 15px 0; |
| border-bottom: 1px solid #e9e9e9; |
| margin-bottom: 15px; |
| |
| } |
| |
| .staff h5 { |
| line-height: 18px; |
| } |
| |
| .staff span { |
| display: block; |
| font-size: 12px; |
| font-weight: normal; |
| color: #888; |
| } |
| |
| .team-about p { |
| padding: 0 0 15px 0; |
| border-bottom: 1px solid #e9e9e9; |
| margin-bottom: 15px; |
| } |
| |
| /* Images Overlay |
| ------------------*/ |
| .picture {position: relative;} |
| .picture img {width: 100%; height: auto;} |
| |
| .image-overlay-link, |
| .image-overlay-zoom { |
| height: 100%; |
| width: 100%; |
| left: 0; |
| top: 0; |
| position: absolute; |
| z-index: 40; |
| display: none; |
| background-color: #d9d9d9; |
| background: rgba(277, 277, 277, 0.7); |
| background-repeat: no-repeat; |
| background-position: 50%; |
| cursor: pointer; |
| } |
| |
| .image-overlay-link { |
| background-image: url(../images/overlay-icon-01.png); |
| } |
| |
| .image-overlay-zoom { |
| background-image: url(../images/overlay-icon-02.png); |
| } |
| |
| /* Headline |
| ------------------*/ |
| .headline { |
| background: url(../images/headline-bg.png) 0 100% repeat-x; |
| display: block; |
| margin: 30px 0 8px 0; |
| } |
| |
| |
| |
| .headline h3, .headline h4 { |
| border-bottom: 1px solid #999; |
| display: inline; |
| padding: 0 10px 0 0; |
| } |
| |
| /* Margins */ |
| |
| .no-margin {margin-top: 0;} |
| .low-margin {margin-top: 15px;} |
| .margintop {margin-top: 20px !important;} |
| .marginbottom {margin-bottom: 20px !important;} |
| .paddingbottom{padding-bottom:30px !important;} |
| |
| /* Page Title |
| ------------------*/ |
| #page-title { |
| border-bottom: 1px solid #e9e9e9; |
| display: block; |
| margin: 10px 0 10px 0; |
| } |
| |
| #page-title h2 { |
| font-weight: normal; |
| border-bottom: 2px solid #333; |
| display: inline; |
| } |
| |
| #page-title span { |
| color: #aaa; |
| } |
| |
| |
| |
| /* Client Logo List |
| ------------------*/ |
| .client-list{ |
| |
| list-style: none; |
| } |
| .client-list li { |
| border: 1px solid #e5e5e5; |
| float: left; |
| margin: -1px 0 0 -1px; |
| } |
| |
| |
| /* ---------------------------------= */ |
| /* Portfolio |
| ----------------------------------- */ |
| .portfolio-item { |
| margin: 5px 0 25px 0; |
| } |
| |
| /* Thumbnails |
| ------------------*/ |
| .item-description {margin-bottom: 30px;} |
| .item-description.alt {margin-bottom:0;} |
| .item-description.related {margin-bottom:0;} |
| |
| .item-description h5 { |
| font-size: 12px; |
| font-family: Arial, sans-serif; |
| font-weight: bold; |
| line-height: 16px; |
| padding: 12px 0 8px 0; |
| margin: 0 0 8px 0; |
| border-bottom: 1px solid #e9e9e9; |
| letter-spacing: 0; |
| } |
| |
| .item-description h5 span { |
| display: block; |
| color: #888; |
| font-weight: normal; |
| margin-top: 3px; |
| } |
| |
| .item-description a {color:#404040;} |
| .item-description a:hover {color:#666;} |
| .item-description p {color: #666; margin-bottom: 0;} |
| |
| |
| /* Filters |
| ------------------*/ |
| #filters { |
| |
| |
| display: block; |
| |
| } |
| |
| #filters ul li { |
| display: inline; |
| } |
| |
| #filters a { |
| padding: 5px 10px; |
| border: 1px solid #ddd; |
| display: inline-block; |
| color: #888; |
| background-color: #fff; |
| margin: 0 5px 10px 0; |
| -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); |
| box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| |
| #filters a:hover, |
| .selected { |
| background-color: #f2f2f2 !important; |
| border: 1px solid #999 !important; |
| color: #555 !important; |
| } |
| |
| |
| /* Isotope Filtering |
| ------------------*/ |
| |
| .isotope-item { |
| z-index: 2; |
| } |
| |
| .isotope-hidden.isotope-item { |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| /**** Isotope CSS3 transitions ****/ |
| |
| .isotope, |
| .isotope .isotope-item { |
| -webkit-transition-duration: 0.8s; |
| -moz-transition-duration: 0.8s; |
| -ms-transition-duration: 0.8s; |
| -o-transition-duration: 0.8s; |
| transition-duration: 0.8s; |
| } |
| |
| .isotope { |
| -webkit-transition-property: height, width; |
| -moz-transition-property: height, width; |
| -ms-transition-property: height, width; |
| -o-transition-property: height, width; |
| transition-property: height, width; |
| } |
| |
| .isotope .isotope-item { |
| -webkit-transition-property: -webkit-transform, opacity; |
| -moz-transition-property: -moz-transform, opacity; |
| -ms-transition-property: -ms-transform, opacity; |
| -o-transition-property: top, left, opacity; |
| transition-property: transform, opacity; |
| } |
| |
| /**** Disabling Isotope CSS3 transitions ****/ |
| |
| .isotope.no-transition, |
| .isotope.no-transition .isotope-item, |
| .isotope .isotope-item.no-transition { |
| -webkit-transition-duration: 0s; |
| -moz-transition-duration: 0s; |
| -ms-transition-duration: 0s; |
| -o-transition-duration: 0s; |
| transition-duration: 0s; |
| } |
| |
| |
| /* Disable CSS transitions for containers with infinite scrolling*/ |
| .isotope.infinite-scrolling { |
| -webkit-transition: none; |
| -moz-transition: none; |
| -ms-transition: none; |
| -o-transition: none; |
| transition: none; |
| } |
| |
| |
| |
| |
| /* ---------------------------------= */ |
| /* Footer |
| ----------------------------------- */ |
| #footer, #footer p, #footer a{color: #aaa} |
| #footer a:hover {color: #fff;} |
| #footer p{font-size: 12px;} |
| .footer-headline { |
| background: url(../images/headline-footer-bg.png) 0 100% repeat-x; |
| display: block; |
| margin: 15px 0 8px 0; |
| } |
| |
| |
| .footer-headline h4 { |
| border-bottom: 1px solid #fff; |
| display: inline; |
| padding: 0 10px 0 0; |
| color: #fff; |
| font-size: 15px; |
| } |
| |
| |
| /* Photo Stream |
| ------------------*/ |
| .flickr-widget {margin-right: -12px; margin-top: 15px;} |
| .flickr-widget img {display: block; width: 100%;} |
| .flickr-widget a:hover {border-color: #505050;} |
| |
| .flickr-widget a { |
| float: left; |
| width: 58px; |
| height: 58px; |
| margin-right: 11px; |
| margin-bottom: 11px; |
| border: 4px solid #404040; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| |
| .ie7 .flickr-widget a {width: 54px; height: 54px;} |
| |
| /* Footer - Twitter Widget |
| ------------------*/ |
| #twitter { |
| |
| float: left; |
| display: block; |
| list-style: none; |
| margin: 0px; |
| } |
| |
| #twitter b a, #twitter b a:hover {color: #707070} |
| #twitter li {line-height: 18px; margin: 2px 0 12px 0; |
| background: url(../images/tweet.png) no-repeat left top; |
| padding-left: 25px; |
| background-position-y: 4px; |
| } |
| #twitter li:last-child {padding: 0; margin: 0;background: url(../images/tweet.png) no-repeat left top; |
| padding-left: 25px; |
| background-position-y: 4px; |
| } |
| #twitter a {color: #fff;} |
| #twitter a:hover {color: #d4d4d4;} |
| |
| /* Footer Bottom |
| ------------------*/ |
| #footer-bottom { |
| |
| position: relative; |
| } |
| |
| |
| #footer-bottom a {color: #fff} |
| #footer-bottom a:hover {color: #d4d4d4;} |
| |
| |
| /* Back To Top |
| ------------------*/ |
| #scroll-top-top { |
| position: absolute; |
| right: 0; |
| bottom: 35px; |
| } |
| |
| #scroll-top-top a { |
| width: 35px; |
| height: 35px; |
| display: block; |
| background-color: #111; |
| background-image: url(../images/scroll-top-top.png); |
| background-repeat: no-repeat; |
| background-position: 50%; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| |
| #scroll-top-top a:hover {background-color: #333;} |
| |
| |
| /* ---------------------------------= */ |
| /* Contact |
| ----------------------------------- */ |
| |
| /* Google Map |
| ------------------*/ |
| #google-map { |
| position: relative; |
| padding: 0px; |
| padding-bottom: 110%; |
| height: 0; |
| overflow: hidden; |
| } |
| |
| /* Posts |
| ------------------*/ |
| .post { |
| border-bottom: 1px solid #e9e9e9; |
| padding: 0 0 15px 0; |
| margin: 5px 0 25px 0; |
| } |
| |
| .post.post-page { margin-bottom: 0;} |
| |
| |
| |
| /* Post Meta */ |
| .post-meta { |
| color: #888; |
| margin: 2px 0 15px 0; |
| font-size: 14px; |
| } |
| |
| .post-meta a { |
| color: #888; |
| text-decoration: none; |
| } |
| |
| .post-meta a:hover { |
| color: #666; |
| } |
| |
| .post-meta i { |
| opacity: 0.35; |
| filter: alpha(opacity = 35); |
| margin-right: 5px; |
| zoom: 1; |
| } |
| |
| .post-meta span { |
| margin-right: 10px; |
| } |
| |
| /* Entry */ |
| a.post-entry { |
| color: #222; |
| margin: 3px 0 9px 0; |
| display: inline-block; |
| padding: 0 12px 0 0; |
| background: url(../images/blog-post-entry-02.png) no-repeat right; |
| background-position: 100% 50%; |
| } |
| |
| a.post-entry:hover { |
| color: #888; |
| background: url(../images/blog-post-entry-02.png) no-repeat right; |
| background-position: 100% 50%; |
| } |
| |
| |
| |
| |
| /* Widgets |
| ------------------*/ |
| .widget {margin-top: 25px;} |
| .first.widget {margin-top: -5px;} |
| .first.widget {margin-top: -5px;} |
| |
| /* Twitter */ |
| #twitter-blog li { |
| line-height: 18px; |
| margin: 2px 0 12px 0; |
| background: url(../images/tweet.png) no-repeat left top; |
| padding-left: 25px; |
| background-position-y: 4px; |
| } |
| |
| #twitter-blog li:last-child {margin-bottom: 0;} |
| |
| #twitter-blog b a { |
| color: #888; |
| font-weight: normal; |
| } |
| |
| /* Flickr */ |
| .flickr-widget-blog {margin-right: -15px;} |
| .flickr-widget-blog img {display: block; width: 100%;} |
| |
| .flickr-widget-blog a { |
| float: left; |
| width: 57px; |
| height: 57px; |
| margin-right: 10px; |
| margin-bottom: 10px; |
| border: 1px solid #ddd; |
| padding: 4px; |
| -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); |
| box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1); |
| } |
| |
| .ie7 .flickr-widget-blog a {width: 53px; height: 53px;} |
| |
| |
| /* ---------------------------------= */ |
| /* Pricing Tables |
| ----------------------------------- */ |
| |
| |
| .pricing-table { |
| /*float: left;*/ |
| |
| } |
| |
| .pricing-table h3 { |
| font-size: 16px; |
| text-align: center; |
| color: #fff; |
| padding: 6px 0; |
| margin: 0; |
| } |
| |
| .pricing-table li { |
| color: #888; |
| background: #fdfdfd; |
| text-align: center; |
| padding: 11px 0; |
| border-bottom: 1px solid #fff; |
| } |
| |
| .pricing-table li:nth-child(2n) { |
| background: #f4f4f4; |
| } |
| |
| .pricing-table h4 { |
| padding:0 0 10px |
| } |
| |
| a.sign-up { |
| text-decoration:none; |
| text-align: center; |
| display: block; |
| color: #fff !important; |
| padding: 12px 0; |
| font-weight: bold; |
| font-size: 14px; |
| -webkit-transition: all 0.1s ease-in-out; |
| -moz-transition: all 0.1s ease-in-out; |
| -o-transition: all 0.1s ease-in-out; |
| -ms-transition: all 0.1s ease-in-out; |
| transition: all 0.1s ease-in-out; |
| } |
| |
| a.sign-up:hover { |
| opacity: 0.9; |
| filter: alpha(opacity=90); |
| } |
| |
| /* Table |
| ------------------*/ |
| .pricing-table h3, |
| .pricing-table h4 { |
| color: #fff; |
| margin: 0; |
| } |
| |
| .pricing-table h4 { |
| padding: 15px 0; |
| } |
| |
| .price, |
| .time { |
| display: block; |
| text-align: center; |
| line-height: 24px; |
| } |
| |
| .price { |
| font-size: 24px; |
| font-weight: normal; |
| } |
| |
| .time { |
| font-size: 12px; |
| font-weight: normal; |
| } |
| |
| /* Color Schemes |
| ------------------*/ |
| |
| /* Color - 1 */ |
| .pricing-table .color-1 h3, .color-1 .sign-up {background-color: #808080; border-bottom: 1px solid #4d4d4d;} |
| .pricing-table .color-1 h4 {background-color: #909090;border-top:1px solid #B8B8B8;} |
| |
| /* Color - 2 */ |
| .pricing-table .color-2 h3, .color-2 .sign-up {background-color: #404040;border-bottom: 1px solid #303030;} |
| .pricing-table .color-2 h4 {background-color: #4c4c4c;border-top:1px solid #5a5a5a;} |
| |
| /* Color - 3 */ |
| .pricing-table .color-3 h3, .color-3 .sign-up {background-color: #111;border-bottom: 1px solid #424242;} |
| .pricing-table .color-3 h4 {background-color: #333;border-top:1px solid #111;} |
| |
| /* Social Icons |
| ------------------*/ |
| |
| /* Header Icons */ |
| .social-icons { |
| margin: 0; |
| width: 100%; |
| text-align: center; |
| } |
| |
| |
| .social-icons li { |
| display: inline-block; |
| list-style: none; |
| text-indent: -9999px; |
| margin: 0 5px 7px 0; |
| padding-left: 0; |
| background-position: 0 -38px; |
| opacity: 0.35; |
| -webkit-transition: all 0.3s ease-in-out; |
| -moz-transition: all 0.3s ease-in-out; |
| -o-transition: all 0.3s ease-in-out; |
| -ms-transition: all 0.3s ease-in-out; |
| transition: all 0.3s ease-in-out; |
| border-radius:14px; |
| -moz-border-radius:14px; |
| -webkit-border-radius:14px; |
| } |
| |
| .social-icons li a { |
| background-repeat: no-repeat; |
| background-position: 0 0; |
| display: block; |
| height: 28px; |
| width: 28px; |
| } |
| |
| .social-icons li:hover {opacity: 1;} |
| |
| /* Social Widget Icons */ |
| #social a { |
| width: 28px; |
| height: 28px; |
| margin: 0 6px 6px 0; |
| display: block; |
| float: left; |
| text-indent: -9999px; |
| background-position: 0 -38px; |
| } |
| |
| #social a img{ |
| border: none; |
| } |
| |
| /* Icon List */ |
| .amazon {background: url(../images/icons/social/amazon.png) no-repeat;} |
| .behance {background: url(../images/icons/social/behance.png) no-repeat;} |
| .blogger {background: url(../images/icons/social/blogger.png) no-repeat;} |
| .deviantart{background: url(../images/icons/social/deviantart.png) no-repeat;} |
| .dribbble {background: url(../images/icons/social/dribbble.png) no-repeat;} |
| .dropbox {background: url(../images/icons/social/dropbox.png) no-repeat;} |
| .evernote {background: url(../images/icons/social/evernote.png) no-repeat;} |
| .facebook {background: url(../images/icons/social/facebook.png) no-repeat;} |
| .forrst {background: url(../images/icons/social/forrst.png) no-repeat;} |
| .github {background: url(../images/icons/social/github.png) no-repeat;} |
| .googleplus {background: url(../images/icons/social/googleplus.png) no-repeat;} |
| .jolicloud {background: url(../images/icons/social/jolicloud.png) no-repeat;} |
| .last-fm {background: url(../images/icons/social/last-fm.png) no-repeat;} |
| .linkedin {background: url(../images/icons/social/linkedin.png) no-repeat;} |
| .picasa {background: url(../images/icons/social/picasa.png) no-repeat;} |
| .pintrest {background: url(../images/icons/social/pintrest.png) no-repeat;} |
| .rss {background: url(../images/icons/social/rss.png) no-repeat;} |
| .skype {background: url(../images/icons/social/skype.png) no-repeat;} |
| .spotify {background: url(../images/icons/social/spotify.png) no-repeat;} |
| .stumbleupon {background: url(../images/icons/social/stumbleupon.png) no-repeat;} |
| .tumblr {background: url(../images/icons/social/tumblr.png) no-repeat;} |
| .twitter {background: url(../images/icons/social/twitter.png) no-repeat;} |
| .vimeo {background: url(../images/icons/social/vimeo.png) no-repeat;} |
| .wordpress {background: url(../images/icons/social/wordpress.png) no-repeat;} |
| .xing {background: url(../images/icons/social/xing.png) no-repeat;} |
| .yahoo {background: url(../images/icons/social/yahoo.png) no-repeat;} |
| .youtube {background: url(../images/icons/social/youtube.png) no-repeat;} |
| |
| /* List Styles |
| ------------------*/ |
| .check_list, |
| .plus_list , |
| .minus_list , |
| .star_list , |
| .arrow_list , |
| .square_list , |
| .circle_list , |
| .cross_list { |
| margin-left: 0px !important; |
| vertical-align: text-top; |
| } |
| |
| .check_list li, |
| .plus_list li, |
| .minus_list li, |
| .star_list li, |
| .arrow_list li, |
| .square_list li, |
| .circle_list li, |
| .cross_list li { |
| list-style: none; |
| margin: 5px 0; |
| vertical-align: text-top; |
| } |
| |
| .check_list li {background: url(../images/icons/list/list_check.png) no-repeat 0% 50%; padding: 0 0 0 18px;} |
| .plus_list li {background: url(../images/icons/list/list_plus.png) no-repeat 0% 50%; padding: 0 0 0 18px;} |
| .minus_list li {background: url(../images/icons/list/list_minus.png) no-repeat 0% 50%; padding: 0 0 0 18px;} |
| .star_list li {background: url(../images/icons/list/list_star.png) no-repeat 0% 50%; padding: 0 0 0 16px;} |
| .arrow_list li {background: url(../images/icons/list/list_arrow.png) no-repeat 0% 4px; padding: 0 0 0 16px;} |
| .square_list li {background: url(../images/icons/list/list_square.png) no-repeat 0% 50%; padding: 0 0 0 16px;} |
| .circle_list li {background: url(../images/icons/list/list_circle.png) no-repeat 0% 50%; padding: 0 0 0 16px;} |
| .cross_list li {background: url(../images/icons/list/list_cross.png) no-repeat 0% 50%; padding: 0 0 0 16px;} |
| |
| |
| /* ---------------------------------= */ |
| /* Media Queries |
| ----------------------------------- */ |
| |
| /* Higher than 960 (desktop devices) |
| ----------------------------------- */ |
| @media only screen and (min-width: 960px) { |
| |
| .flexslider.home { |
| min-height: 400px; |
| } |
| |
| } |
| |
| |
| /* All Mobile Sizes (devices and browser) |
| ----------------------------------- */ |
| @media only screen and (max-width: 767px) { |
| |
| #footer { |
| width: 100%; |
| margin: 0 auto; |
| } |
| |
| #wrapper { |
| width: 100%; |
| } |
| |
| |
| #navigation { |
| float: none; |
| } |
| |
| .js .selectnav { |
| display: block; |
| } |
| |
| .js #nav, |
| .slide-caption, |
| .search-form, |
| #tagline, |
| .social-icons, |
| .widget, |
| .widget-alt, |
| #navigation ul li a { |
| display: none; |
| } |
| |
| .social-icons.about { |
| display: block; |
| margin-bottom: 30px; |
| } |
| |
| #contact-top { |
| text-align: center; |
| float: right; |
| } |
| |
| #scroll-top-top { |
| display: none; |
| } |
| |
| .icon-box i { |
| margin-left: -10px !important; |
| } |
| |
| .post-meta { |
| display: none; |
| } |
| |
| .post-title h2 { |
| line-height: 26px; |
| margin-bottom: 15px; |
| } |
| |
| .post-icon { |
| margin-top: 28px; |
| } |
| |
| #filters, |
| #portfolio-navi { |
| position: relative; |
| text-align: left; |
| display: block; |
| margin: 0 0 23px 0; |
| } |
| |
| #portfolio-navi { |
| margin: -5px 0 25px 0; |
| } |
| |
| .portfolio-item { |
| margin: 5px 0 25px 0 !important; |
| } |
| |
| .item-description.related { |
| margin-bottom: 30px; |
| } |
| |
| .flexslider.home { |
| display: none; |
| } |
| |
| .picture img { |
| max-width: 250px; |
| height: auto; |
| } |
| |
| } |
| |
| |
| /* NEW */ |
| /* #Clearing |
| ------------------------- */ |
| |
| /* Self Clearing Goodness */ |
| .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } |
| |
| /* Use clearfix class on parent to clear nested columns, |
| or wrap each row of columns in a <div class="row"> */ |
| .clearfix:before, |
| .clearfix:after, |
| .row:before, |
| .row:after { |
| content: '\0020'; |
| display: block; |
| overflow: hidden; |
| visibility: hidden; |
| width: 0; |
| height: 0; } |
| .row:after, |
| .clearfix:after { |
| clear: both; } |
| .row, |
| .clearfix { |
| zoom: 1; } |
| |
| /* You can also use a <br class="clear" /> to clear columns */ |
| .clear { |
| clear: both; |
| display: block; |
| overflow: hidden; |
| visibility: hidden; |
| width: 0; |
| height: 0; |
| } |
| |
| /*Client Logo, Grayscale & Hover Effect*/ |
| |
| .client-logo{ |
| filter: grayscale(100%); |
| -moz-filter: grayscale(100%); |
| -webkit-filter: grayscale(100%); |
| -o-filter: grayscale(100%); |
| -webkit-transition: all 0.3s ease; |
| -moz-transition: all 0.3s ease; |
| -o-transition: all 0.3s ease; |
| transition: all 0.3s ease; |
| |
| } |
| .client-logo:hover{ |
| |
| filter: grayscale(0%); |
| -moz-filter: grayscale(0%); |
| -webkit-filter: grayscale(0%); |
| -o-filter: grayscale(0%); |
| |
| -webkit-transition: all 0.3s ease; |
| -moz-transition: all 0.3s ease; |
| -o-transition: all 0.3s ease; |
| transition: all 0.3s ease; |
| |
| } |
| |
| |
| |
| |
| |
| |
| /*Features Box */ |
| |
| .featuresbox{ |
| border: 1px solid #e7e7e7; |
| |
| |
| text-align: center; |
| |
| padding:20px; |
| min-height: 370px; |
| background: #fff; |
| |
| transition: all 0.5s ease-in-out; |
| -moz-transition: all 0.5s ease-in-out; |
| -webkit-transition: all 0.5s ease-in-out; |
| -o-transition: all 0.5s ease-in-out; |
| -ms-transition: all 0.5s ease-in-out; |
| } |
| |
| .featuresbox:hover{ |
| /* fallback */ |
| background-color: #f9f9f9; |
| |
| /* Safari 4-5, Chrome 1-9 */ |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#f9f9f9)); |
| |
| /* Safari 5.1, Chrome 10+ */ |
| background: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1); |
| |
| /* Firefox 3.6+ */ |
| background: -moz-linear-gradient(top, #f9f9f9, #f1f1f1); |
| |
| /* IE 10 */ |
| background: -ms-linear-gradient(top, #f9f9f9, #f1f1f1); |
| |
| /* Opera 11.10+ */ |
| background: -o-linear-gradient(top, #f9f9f9, #f1f1f1); |
| |
| box-shadow: inset 0 0 0 1px #fff; |
| -moz-box-shadow: inset 0 0 0 1px #fff; |
| -webkit-box-shadow: inset 0 0 0 1px #fff; |
| -o-box-shadow: inset 0 0 0 1px #fff; |
| -ms-box-shadow: inset 0 0 0 1px #fff; |
| |
| -webkit-transition: all 0.3s ease-in-out; |
| -moz-transition: all 0.3s ease-in-out; |
| -o-transition: all 0.3s ease-in-out; |
| -ms-transition: all 0.3s ease-out; |
| transition: all 0.3s ease-in-out; |
| } |
| |
| .feature-image { |
| width: 62px; |
| height: 55px; |
| display: block; |
| margin: 0 auto; |
| } |
| |
| .feature-image-wide |
| { |
| width: 100px; |
| height: 55px; |
| display: block; |
| margin: 0 auto; |
| } |
| |
| /* showcase*/ |
| img.showcase { |
| |
| padding: 5px ; |
| height: 250px; |
| } |
| |
| .sc_header { |
| font-weight: bold; |
| |
| } |
| |
| div.gallery_strip { |
| width: 100%; |
| margin-top: 10px; |
| margin-bottom: 10px; |
| padding-top: 5px; |
| padding-bottom: 5px; |
| background-color: #ebe6e6; |
| white-space: nowrap; |
| overflow-x: auto; |
| overflow-y: hidden; |
| } |
| |
| /*blog entry*/ |
| |
| .entry{float:left; margin-bottom:10px;} |
| .entry span.meta{ display:block; padding:0; width:50px; float:left; text-align:center;} |
| .entry span.meta strong{ font-size:18px; background:#f6f6f6; color:#555; border:1px solid #ececec; display:block; float:left; width:100%; padding:5px 0;} |
| .entry span.meta small{ font-size:11px; background:#444; border:1px solid #333; display:block; float:left; width:100%; padding:0; color:#fff;} |
| .entry div{ float:right; width:79%;} |
| .entry div h4{ margin-bottom:10px; font-size:14px; margin-top: 0px !important;} |
| .entry div h4 a{ color:#181818;} |
| .entry div h4 a:hover{ color:gray;} |
| |
| /*ribbon*/ |
| |
| .ribbon{margin:0} |
| .ribbon span{position:absolute;display:inline-block;top:22px;right:-25px;color:#fff;text-align:center;text-transform:uppercase;background:#f26a46;width:100px;padding:3px 10px;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2),inset 0 5px 30px rgba(255,255,255,0.2);-moz-box-shadow:0 0 10px rgba(0,0,0,0.2),inset 0 5px 30px rgba(255,255,255,0.2);box-shadow:0 0 10px rgba(0,0,0,0.2),inset 0 5px 30px rgba(255,255,255,0.2);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg)} |
| .ie .ribbon span{right:0;top:0;padding:3px} |
| |
| /*ribbon end*/ |
| |
| /*label*/ |
| .label{font-weight: normal;} |
| |
| .dropdown-menu .active > a, |
| .dropdown-menu .active > a:hover { |
| background: #999 !important; |
| color: #fff !important; |
| } |
| |
| .dropdown-menu li > a:hover, |
| .dropdown-menu li > a:focus, |
| .dropdown-submenu:hover > a { |
| |
| background: #999 !important; |
| } |
| .form-signin { |
| max-width: 300px; |
| padding: 19px 29px 29px; |
| |
| background-color: #fff; |
| border: 1px solid #e5e5e5; |
| -webkit-border-radius: 5px; |
| -moz-border-radius: 5px; |
| border-radius: 5px; |
| -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
| -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
| box-shadow: 0 1px 2px rgba(0,0,0,.05); |
| } |
| .form-signin .form-signin-heading, |
| .form-signin .checkbox { |
| margin-bottom: 10px; |
| } |
| .form-signin input[type="text"], |
| .form-signin input[type="password"] { |
| font-size: 16px; |
| height: auto; |
| margin-bottom: 15px; |
| padding: 7px 9px; |
| } |
| |
| .container-narrow { |
| margin: 0 auto; |
| max-width: 700px; |
| } |
| .jumbotron { |
| margin: 60px 0; |
| text-align: center; |
| } |
| .jumbotron h1 { |
| font-size: 72px; |
| line-height: 1; |
| } |
| |
| /* Featurettes |
| ------------------------- */ |
| |
| .featurette-divider { |
| margin: 80px 0; /* Space out the Bootstrap <hr> more */ |
| } |
| .featurette { |
| padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ |
| overflow: hidden; /* Vertically center images part 2: clear their floats. */ |
| } |
| .featurette-image { |
| margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ |
| } |
| |
| /* Give some space on the sides of the floated elements so text doesn't run right into it. */ |
| .featurette-image.pull-left { |
| margin-right: 40px; |
| } |
| .featurette-image.pull-right { |
| margin-left: 40px; |
| } |
| |
| /* Thin out the marketing headings */ |
| .featurette-heading { |
| font-size: 50px; |
| font-weight: 300; |
| line-height: 1; |
| letter-spacing: -1px; |
| } |
| /* |
| #Links |
| ------------------------- */ |
| |
| a,a:visited {color: #33F; text-decoration: none; outline: 0; -webkit-transition: color 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out; -transition: color 0.1s ease-in-out;} |
| a:hover, a:focus { color: #88F; text-decoration: none;} |
| p a, p a:visited { line-height: inherit; } |
| |
| /* |
| Adds a margin to items in places like the 'index', 'team' and 'getting started videos' |
| ------------------------- */ |
| #wrapper .row-fluid .span3 { margin-bottom: 2.564102564102564%; } |
| a.btn.btn-inverse:visited { color: #2da4d2; } |