/* Theme Name: Avalanche Theme URI: http://underscores.me/ Author: Rigorous Themes Author URI: http://rigorousthemes.com/ Description: Avalanche is multipurpose theme suitable for business, corporate, personal sites, portfolio and all other purposes. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: avalanche Tags: two-columns, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Avalanche is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Asides ## Comments # Infinite scroll # Media ## Captions ## Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } .btn { background: rgba(33, 117, 155, 1); padding: 10px 15px; color: #ffffff; font-family: 'Roboto Condensed', serif; font-size: 14px; text-transform: uppercase; } .btn:hover { color: #fff; -webkit-transition: background 0.5s 0.2s; -moz-transition: background 0.5s 0.2s; -ms-transition: background 0.5s 0.2s; -o-transition: background 0.5s 0.2s; transition: background 0.5s 0.2s; background: rgba(33, 117, 155, 0.5); } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } table, th, td { border: 1px solid #666; } caption, th, td { font-weight: normal; text-align: left; } table { width: 100%; border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 24px; } .entry-content table, .comment-content table { margin-bottom: 24px; line-height: 1.28571; } td { padding: 8px; border-width: 0 1px 1px 0; } th { padding: 8px; border-width: 0 1px 1px 0; text-transform: uppercase; color: #000; font-weight: bold; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /* Links */ a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } a, a:visited { text-decoration: none; outline: 0; } a:hover, a:focus { color: initial; outline: 0; } a:focus { text-decoration: none; } .tags-links { display: block; margin-top: 10px; } .tags-links a { display: inline-block; color: #fff; background: #21759b; padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; color: #333; font-family: Roboto Condensed, sans-serif; font-weight: 700; line-height: 1.3; text-transform: capitalize; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #990000; } h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 18px; } p { margin: 0 0 20px 0; } p img { margin: 0 4px; } em { font-style: italic; } strong { font-weight: bold; } small { font-size: 90%; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote, blockquote p { color: #333333; font-style: italic; } blockquote cite { display: block; color: #555; font-size: 12px; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0; padding: 0; } ol li { padding: 10px 0 10px 10px; } ul { list-style: square; } main ul, aside ul { list-style: none; } main ul > li, aside ul > li { position: relative; padding: 10px 0 10px 25px; border-top: 1px dotted #333; } main ul > li::before, aside ul > li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 10px; } main ul > li:first-child, aside ul > li:first-child { border: none; } ol { list-style: decimal; } /* Highlight Color */ ::-moz-selection { background: #21759b; color: #fff; text-shadow: none; } ::selection { background: #21759b; color: #fff; text-shadow: none; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: none; background: none repeat scroll 0 0 #21759b; padding: 10px 15px; color: #ffffff; font-family: 'Roboto Condensed', serif; font-size: 18px; cursor: pointer; text-decoration: none; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #12619B; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"], input[type="password"], input[type="email"], select, .search-form .submit, textarea { padding: 10px 15px; border: 1px solid #ccc; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #333; font-family: 'Roboto Condensed', serif; font-size: 18px; outline: none; -webkit-appearance: none; -moz-appearance: none; } select { border: 1px solid #ccc; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"] { padding: 10px 15px; outline: none; } textarea { padding-left: 3px; width: 100%; } /*-------------------------------------------------------------- # Lists --------------------------------------------------------------*/ ol { margin: 0 0 20px 0; list-style-position: inside; list-style-type: decimal; } ol ol { list-style: lower-alpha outside none; } ol ol ol { list-style: lower-roman outside none; } ol ol ol ol { list-style: upper-alpha outside none; } ol ol ol ol ol { list-style: lower-alpha outside none; } ul { margin: 0 0 20px 0; } ul ol, ol ul, ol ol, ul ul { margin-bottom: 0; } dl { margin: 0 0 18px 3px; } dl dt { margin: 12px 0 0; font-weight: bold; } dl dd { margin: 6px 0 0 24px; } code, kbd, tt, var, samp, pre { -moz-hyphens: none; font-family: monospace, serif; font-size: 15px; line-height: 1.6; } pre { overflow: auto; -moz-box-sizing: border-box; max-width: 100%; padding: 12px; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 24px; white-space: pre-wrap; word-wrap: break-word; } mark, ins { background: none repeat scroll 0 0 #FFFF00; text-decoration: none; } cite, dfn, em, i { font-style: italic; } sup, sub { font-size: 60%; } /*-------------------------------------------------------------- ## Images --------------------------------------------------------------*/ img { max-width: 100%; width: auto; height: auto; border: 0 none; vertical-align: middle; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; margin-bottom: 10px; position: relative; } .main-navigation ul ul li { margin-bottom: 0; } .main-navigation a, .show-form { display: block; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 600; background: rgba(0, 0, 0, 0.1); padding: 10px; border-right: 1px dotted #23527c; color: #990000; } .main-navigation ul ul li a { border-right: none; } .main-navigation a:hover, .current-menu-item a { background: #990000; color: #fff; } .container-fluid { background: #eee; } .main-navigation li:last-child a { border: none; } .main-navigation ul ul { background: #ddd; float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a, .main-navigation li.focus > a { } .main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a { } .main-navigation ul ul a:hover, .main-navigation ul ul a.focus { } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a { } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; display: inline-block; background: #990000; padding: 5px; max-width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; display: inline-block; background: #990000; padding: 5px; max-width: 50%; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 16px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- ## Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } #recentcomments, #archives-2 ul, #categories-2 ul, #recent-posts-2 ul, #meta-2 ul { list-style-type: none; } #recentcomments li::before { content: "\f0e6"; font-family: "FontAwesome"; margin-right: 10px; } .bypostauthor { display: block; } #archives-2 ul li::before { content: "\f073"; font-family: "FontAwesome"; margin-right: 10px; } #categories-2 ul li::before { content: "\f115"; font-family: "FontAwesome"; margin-right: 10px; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; border: 1px solid #ccc; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 20px; margin-left: -4px; clear: both; overflow: hidden; } .gallery-item { overflow: hidden; float: left; margin: 0 4px 4px 0; position: relative; } .gallery-icon { margin-bottom: 0; } .gallery-columns-1.gallery-size-medium, .gallery-columns-1.gallery-size-thumbnail, .gallery-columns-2.gallery-size-thumbnail, .gallery-columns-3.gallery-size-thumbnail { display: table; margin: 0 auto 20px; } .gallery-columns-1 .gallery-item, .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item { text-align: center; } .gallery-columns-3 .gallery-item { max-width: 49.3%; max-width: calc(50% - 4px); } .gallery-columns-3 .gallery-item { max-width: 32.7%; max-width: calc(33% - 4px); } .gallery-columns-4 .gallery-item { max-width: 24.4%; max-width: calc(25% - 4px); } .gallery-columns-5 .gallery-item { max-width: 19.4%; max-width: calc(20% - 4px); } .gallery-columns-6 .gallery-item { max-width: calc(16.7% - 4px); } .gallery-columns-7 .gallery-item { max-width: 13.6%; max-width: calc(14.28% - 4px); } .gallery-columns-8 .gallery-item { max-width: 11.8%; max-width: calc(12.5% - 4px); } .gallery-columns-9 .gallery-item { max-width: 10.4%; max-width: calc(11.1% - 4px); } .gallery-columns-1 .gallery-item:nth-of-type(n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: 0; } dl.gallery-item dt.gallery-icon { margin: 0; } .gallery-caption { opacity: 0; position: absolute; left: 0; bottom: 0; width: 100%; max-height: 50%; padding: 2px 8px; margin: 0; background-color: rgba(0, 0, 0, 0.7); color: #FFFFFF; font-size: 14px; line-height: 1.3; text-align: left; transition: opacity 400ms ease 0s; } .gallery-caption:before { position: absolute; top: 0; left: 0; content: ""; min-height: 49px; width: 100%; height: 100%; box-shadow: 0 -10px 15px #000000 inset; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*comment*/ #comments { margin: 50px 0; } .comment-list, .comment-list ol { margin: 25px 0 40px; list-style-position: outside; } .comment-list .comment { margin-bottom: 25px; } .comment-wrapper { overflow: hidden; } .comment-meta { margin-bottom: 10px; overflow: hidden; padding: 10px 0; border-bottom: 1px dashed #333; } .comment-author { float: left; margin-right: 15px; } #comments article { background: #fff; padding: 25px; } .comment-author img { display: inline-block; border-radius: 50%; width: 50px; height: 50px; } .comment-author .fn { display: block; padding-bottom: 3px; font-size: 18px; color: #000; margin-top: 10px; } .comment-author a:hover { text-decoration: none; } .comment-content { line-height: 30px; } .comment-reply-link { font-size: 14px; line-height: 1.5; } .comment-list ol { margin-left: 40px; } .comment-subscription-form { margin-bottom: 7px; } /*-------------------------------------------------------------- ## Custom CSS --------------------------------------------------------------*/ .outer-wrapper { width: 1000px; padding: 0 15px; box-sizing: border-box; margin: 0 auto; overflow: hidden; } .site-title { margin-bottom: 0; line-height: 1; } .site-title a { font-weight: 700; font-family: "Roboto Condensed", sans-serif; font-size: 50px; } .site-title a:hover { color: #21759b; text-decoration: none; } .site-branding p { font-weight: 400; font-family: 'Lobster Two', cursive; font-size: 22px; } .page-header { border-bottom: 1px dashed #333;; } #top-header { background: #eee; border-bottom: 5px solid #666; padding: 25px 0; } #header-logo-image a { height: 150px; display: inline-block; width: 150px; } #header-logo-image { text-align: center; } #header-logo-image img { border-radius: 50%; width: 100%; height: auto; } .social-links { list-style: none; text-align: right; } .social-links li { display: inline-block; margin: 5px 10px; } .social-links li a { color: #21759b; font-size: 20px; font-weight: bold; } .social-links li a:hover { text-decoration: none; color: #990000; } .nav-next a, .nav-previous a { color: #fff; } .nav-previous a::before, .nav-next a::after { content: "\f191"; font-family: "FontAwesome"; display: inline-block; margin-right: 10px; } .nav-next a::after { content: "\f152"; margin-left: 10px; } .menu-toggle { display: none; } .show { display: block; } .about-figure img { border-radius: 50%; } .service-image { margin: 0; } .service-image a { display: inline-block; } .home #main span.fa, #colophon span.fa { background: #990000; color: #fff; padding: 15px; height: 60px; border-radius: 50%; width: 60px; text-align: center; } #colophon .address-label .fa { width: 40px; height: 40px; margin-right: 10px; padding: 10px; } .home-posts { position: relative; } .home-posts .post-content { position: absolute; left: 0; top: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .home-posts .post-content h2 a{ color: #fff; } .home-posts .post-content h2 a:hover{ text-decoration: none; } .home-posts:hover .post-content { display: block; text-align: center; } .home-posts figure { margin: 0; } #home-page-blog h3, .home-service-wrapper h3 { text-align: center; margin-bottom: 30px; font-size: 25px; } .col-3-part.home-posts { padding: 0; margin: 0 10px; } .home-posts h2 { margin-top: 100px; } .home-posts h2 a:hover { color: #990000; text-decoration: underline; } /*Banner Styling*/ .slider-content-wrapper { height: 400px; } .slider-content { padding: 75px 50px 0 50px; height: 100%; text-align: center; background: rgba(0, 0, 0, 0.5); } .slider-content h3 a { text-transform: uppercase; font-size: 55px; } .slider-content h3 a:hover { color: #990000; text-decoration: none; text-shadow: 0 0 4px #333; } .slider-content p { color: #fff; font-size: 18px; } #banner-slider .flex-control-nav { bottom: 40px; } #banner-slider .flex-control-paging li a { background: rgba(255, 255, 255, 0.5); border-radius: 0; } .flex-control-paging li a:hover, #banner-slider .flex-control-paging li a.flex-active { background: #fff; } #banner-slider .flex-direction-nav a { width: 50px; height: 50px; color: #fff; text-shadow: 4px 4px 2px #000; } .widget-title { background: #990000; padding: 5px 15px; color: #fff; } .show-form { cursor: pointer; font-family: "FontAwesome"; font-size: 16px; line-height: 1.5; background: #333; color: #fff; float: left; } .search-form-wrapper { position: relative; float: left; } .form-wrapper form { float: right; } .form-wrapper input[type="search"], .form-wrapper input[type="submit"] { padding: 10px 5px; font-size: 14px; } #primary-menu { display: inline-block; float: left; } .about-figure { margin: 0; } section { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dotted #000; overflow: hidden; } .entry-meta, .entry-footer { border: 1px dotted #000; padding: 10px; } .entry-meta .fa, .entry-footer .fa { margin: 0 10px; display: inline-block; } .entry-title { font-family: "Roboto Condensed", sans-serif; font-weight: bold; } *{ word-wrap: break-word; } #primary { padding-top: 25px; } .form-wrapper { overflow: hidden; } body.custom-background { background-size: cover; } /*Aside*/ #secondary { padding: 40px 0 0 50px; } /*Fallback Styling for aside section*/ aside section { padding: 0; margin: 0; border: none; } .service-image img{ width: 100%; } .skillbar { position:relative; display:block; margin-bottom:15px; width:100%; background:#eee; height:35px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-transition:0.4s linear; -moz-transition:0.4s linear; -ms-transition:0.4s linear; -o-transition:0.4s linear; transition:0.4s linear; -webkit-transition-property:width, background-color; -moz-transition-property:width, background-color; -ms-transition-property:width, background-color; -o-transition-property:width, background-color; transition-property:width, background-color; } .skillbar-title { position:absolute; top:0; left:0; width:110px; font-weight:bold; font-size:13px; color:#ffffff; background:#6adcfa; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .skillbar-title span { display:block; background:rgba(0, 0, 0, 0.1); padding:0 20px; height:35px; line-height:35px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border-top-left-radius:3px; border-bottom-left-radius:3px; } .skillbar-bar { height:35px; width:0px; background:#6adcfa; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .skill-bar-percent { position:absolute; right:10px; top:0; font-size:11px; height:35px; line-height:35px; color:#ffffff; color:rgba(0, 0, 0, 0.4); } /*Footer*/ #top-footer { text-align: center; border-bottom: 1px dotted #000; margin-bottom: 20px; } #top-footer address { display: inline-block; float: none; text-align: left; } .home #main { background: #eee; } #colophon { text-align: center; padding: 25px; background: #eee; margin-top: 30px; } .address-lists { display: block; padding: 10px 0; border-top: 1px dashed #000; } .address-lists:first-child { border: none; } .address-label i { display: inline-block; margin-right: 10px; } .rws-left-sidebar #secondary { float: left; padding: 25px; } .rws-left-sidebar #main, .rws-left-sidebar #primary { float: right; padding: 0 20px 0 50px; } .rws-no-sidebar #main, .rws-no-sidebar #primary { width: 100%; } section:last-child { border: none; } .address-label { font-weight: bold; font-size: 16px; text-transform: capitalize; font-family: Raleway; color: #666; min-width: 125px; display: inline-block; } .address-label::after { content: ":"; margin-right: 5px; } .contact-icon, h3 .fa { margin-right: 15px; display: inline-block; } .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; text-align: center; border-radius: 50%; padding-top:10px; color: #fff; white-space: nowrap; background: red; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top span{ font-size: 20px; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .no-touch .cd-top:hover { background-color: #990000; color: #fff; opacity: 1; } /*Column Added */ .col-3-part { width: 31%; float: left; margin: 0 10px; } /*Hompage Content Section*/ .home-service-wrapper { padding: 20px 0; } /*Medias Queries*/ @media only screen and (max-width: 1200px) { .outer-wrapper { width: 100%; } } @media only screen and (max-width: 959px) { .col-3-part{ margin: 0; } .col-3-part.home-posts { margin: 0 5px; } } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 50px; width: 50px; right: 30px; bottom: 30px; padding-top: 15px; } } @media only screen and (max-width: 767px) { .menu-toggle { width: 100%; text-align: left; box-sizing: border-box !important; } .slider-content{ padding: 25px; } .col-3-part { margin: 15px 0; width: 100%; text-align: center; } #home-page-blog{ text-align:center; } .col-3-part.home-posts { width: auto; display: inline-block; margin: 20px 0; float: none; } .about-figure, .about-me { float: none; margin: 25px 0; text-align: center; display: block; } } @media only screen and (max-width: 640px) { #secondary { padding: 10px; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous, .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { max-width: 100%; width: 100%; margin: 15px 0; text-align: center; } .slider-content h3 a { font-size: 45px; } #banner-slider .flex-control-nav { bottom: 0; } .form-wrapper, .social-links { width: 100%; text-align: center; } .form-wrapper form { float: none; } section { margin-bottom: 10px; } } @media only screen and (max-width: 480px) { .slider-content h3 a { font-size: 35px; } #colophon { padding: 25px 5px; } .slider-content { padding-top: 50px; } .flex-direction-nav { display: none; } } @media only screen and (max-width: 360px) { .nav-links { text-align: center; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous, .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: none; margin: 15px 0; } }