/* Theme Name: Keen Theme URI: http://www.tienvooracht.nl/themes/keen Description: Keen WordPress theme Version: 1.0 Author: Derk Jan ten Ham Author URI: http://www.tienvooracht.nl License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, light, dark, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-menu, editor-style, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, translation-ready Text Domain: tva Template: keen */ /* =============================================================================================================================================================================== Reset =============================================================================================================================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /* =============================================================================================================================================================================== Global =============================================================================================================================================================================== */ /* ======================================================================================= Box-sizing ======================================================================================= */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ======================================================================================= Images & embeds ======================================================================================= */ img, object, embed { width: 100%; max-width: 100%; height: auto; } object, embed { height: 100%; } img { -ms-interpolation-mode: bicubic; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } /* ======================================================================================= Alignment ======================================================================================= */ .left { float: left !important; } .right { float: right !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .hide { display: none !important; } .invisible { visibility: hidden; -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } /* ======================================================================================= Forms ======================================================================================= */ textarea { height: auto; min-height: 200px; height: auto; } select { width: 100%; } /* Nice PayPal Button Lite */ .nicepaypalbuttonlite input[type="image"] { display: block; margin: 0 auto; } /* WP PayPal Shopping Cart */ .shopping_cart { border: #aaa 1px solid; min-width: 245px; } .shopping_cart .wp_cart_checkout_button { display: block; margin: 5px auto 0 auto; } .shopping_cart input[type="text"] { padding: 0 3px; height: 30px; width: auto; font-size: 12px; text-align: center; } #tva-sidebar #sidebar-widgets aside .shopping_cart { color: #aaa; } #tva-sidebar #sidebar-widgets aside.widget_wp_paypal_shopping_cart_widgets .widget-title { color: #aaa; margin-bottom: 3px; } #tva-sidebar #sidebar-widgets aside.widget_wp_paypal_shopping_cart_widgets a { color: #dedede; } /* ======================================================================================= Remove text-shadow in selection highlight: h5bp.com/i ======================================================================================= ::-moz-selection { background-color: #f7493c; color: white; text-shadow: none; } ::selection { background-color: #f7493c; color: white; text-shadow: none; } */ /* =============================================================================================================================================================================== Body =============================================================================================================================================================================== */ body { background-color: white; color: #444444; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; vertical-align: baseline; text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased; } html, body { overflow-x: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* =============================================================================================================================================================================== Typography =============================================================================================================================================================================== */ /* ======================================================================================= Paragraph ======================================================================================= */ p { margin-bottom: 20px; } /* ======================================================================================= Anchors ======================================================================================= */ a { color: #f7493c; text-decoration: none; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a:hover { color: #c51508; text-decoration: none; } #site-title a { color: #222222; } /* ======================================================================================= Headings ======================================================================================= */ h1, h2, h3, h4, h5, h6 { color: #222222; font-family: "Maven Pro", Helvetica, Arial, sans-serif; font-weight: 400; padding: 0; margin: 0 0 10px 0; line-height: 1.3em; } h1 { font-size: 28px; margin: 0; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 12px; } /* ======================================================================================= Helpful Typography Defaults ======================================================================================= */ /* ============================================= Italic ============================================= */ em, i { font-style: italic; line-height: inherit; } /* ============================================= Strong ============================================= */ strong, b { font-weight: 700; line-height: inherit; } /* ============================================= Small ============================================= */ small { font-size: 14px; line-height: inherit; } /* ============================================= Code ============================================= */ pre, code { color: #444444; font-size: 14px; font-family: Consolas, "Liberation Mono", Courier, monospace; font-weight: normal; } /* ============================================= Lists ============================================= */ ul, ol, dl { list-style-position: inside; margin: 0 0 20px 0; } /* ============================================= Unordered Lists ============================================= */ ul li ul { margin-left: 20px; margin-bottom: 0; } ul.square li ul, ul.square li ol, ul.circle li ul, ul.circle li ol, ul.disc li ul, ul.disc li ol { list-style: inherit; } ul.square { list-style-type: square; } ul.circle { list-style-type: circle; } ul.disc { list-style-type: disc; } ul.no-bullet { list-style: none; } /* ============================================= Ordered Lists ============================================= */ ol li ol { margin-left: 20px; margin-bottom: 0; } /* ============================================= Definition Lists ============================================= */ dl dt { font-weight: 700; margin-bottom: 10px; } dl dd { margin-bottom: 20px; } /* ============================================= Abbreviations ============================================= */ abbr, acronym { color: inherit; font-size: 90%; text-transform: uppercase; border-bottom: 1px dotted #dddddd; cursor: help; } abbr { text-transform: none; } /* ============================================= Blockquotes ============================================= */ blockquote { padding: 0 30px; margin: 0 0 30px 0; font-size: 16px; border-left: 6px solid #f7493c; } blockquote p { -webkit-opacity: 0.75; -moz-opacity: 0.75; -o-opacity: 0.75; -khtml-opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); opacity: 0.75; } blockquote p:last-child { margin-bottom: 0; } blockquote cite { display: block; color: #444444; font-size: 16px; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #888888; } /* =============================================================================================================================================================================== Forms =============================================================================================================================================================================== */ /* ======================================================================================= Form ======================================================================================= */ form { margin: 0; } /* ======================================================================================= Labels ======================================================================================= */ label { display: block; float: left; position: relative; width: 100%; padding: 5px 0; font-family: "Maven Pro", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; cursor: pointer; } /* ======================================================================================= Basic form styling ======================================================================================= */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea { display: block; float: left; position: relative; width: 100%; height: 50px; background-color: white; padding: 10px; color: #888888; font-size: 16px; border: 1px solid #cccccc; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, select:hover, textarea:hover { background-color: white; color: #666666; border-color: #aaaaaa; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, select:focus, textarea:focus { background-color: white; color: #666666; border-color: #888888; outline: none; } textarea { resize: vertical; } .dark input[type="text"], .dark input[type="password"], .dark input[type="date"], .dark input[type="datetime"], .dark input[type="datetime-local"], .dark input[type="month"], .dark input[type="week"], .dark input[type="email"], .dark input[type="number"], .dark input[type="search"], .dark input[type="tel"], .dark input[type="time"], .dark input[type="url"], .dark select, .dark textarea { border: none !important; } /* ======================================================================================= Error Handling ======================================================================================= */ .error input, input.error, .error textarea, textarea.error { border-color: red; } .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: #888888; } .error label, label.error { color: red; } .error { display: block; float: left; position: relative; width: 100%; background-color: red; padding: 10px; margin: 0 0 20px 0; color: white; font-weight: 700; } /* =============================================================================================================================================================================== Various WordPress =============================================================================================================================================================================== */ /* ======================================================================================= Images ======================================================================================= */ #content img, .entry-format img, .entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption { display: block; max-width: 100%; width: auto; } .entry-format img, .entry-content img, .entry-summary img, .comment-content img, img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; } img.size-full, img.size-large, img.wp-post-image { height: auto; max-width: 100%; } .home #content img, .home .entry-content img { border: #ddd 1px solid; } .home .home-columns-3 { display: block; width: 1170px; } .home-column-1, .home-column-2, .home-column-3 { float: left; width: 390px; } .home-column-1 { } .home-column-2 { } .home-column-3 { } .home-column-1 img, .home-column-2 img { margin: 0 20px 20px 0; } .home-column-3 img { margin: 0 0 20px 0; } /* ======================================================================================= iFrames and embed ======================================================================================= */ embed, iframe, object, video { margin-bottom: 24px; max-width: 100%; } /* ======================================================================================= Video & Audio ======================================================================================= */ .wp-video { display: block; float: left; position: relative; width: 100%; } .wp-video-shortcode, .wp-audio-shortcode { max-height: 100%; max-width: 100%; } /* ======================================================================================= Cursor ======================================================================================= */ a[class*="view"] img { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } /* ======================================================================================= Captions ======================================================================================= */ .wp-caption .wp-caption-text { display: block; /*float: left;*/ position: relative; width: auto; /*height: 100%;*/ background-color: #ffffff; /*padding: 0 20px; margin: -40px 0 0 0; min-height: 40px;*/ margin-bottom: 0px; color: #444; font-size: 11px; text-align: center; /*line-height: 40px;*/ } .wp-caption .wp-caption-text a { color: #444; } .wp-caption .wp-caption-text a:hover { color: #444; } .wp-caption .wp-caption-text a:visited { color: #444; } /* ======================================================================================= Alignment ======================================================================================= */ .alignnone, .alignleft, .aligncenter, .alignright { margin-bottom: 20px; } .alignnone { display: block; } .alignleft { float: left; margin-right: 20px; } .aligncenter { display: block; margin: 0 auto 0 auto; } .alignright { float: right; margin-left: 20px; } /* ======================================================================================= Misc ======================================================================================= */ .wp-smiley { border: 0; margin-bottom: 0; margin-top: 0; padding: 0; } /* ======================================================================================= Gallery ======================================================================================= */ .gallery { display: block; float: left; position: relative; width: 100%; } .gallery .gallery-item { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .gallery .gallery-item .gallery-icon a { display: block; float: left; position: relative; width: 100%; background-color: #f7493c; } .gallery .gallery-item .gallery-icon a:hover img { -webkit-opacity: 0.1; -moz-opacity: 0.1; -o-opacity: 0.1; -khtml-opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); opacity: 0.1; } .gallery.gallery-columns-1 .gallery-item { width: 100%; margin-bottom: 20px; } .gallery.gallery-columns-2 { margin-bottom: 20px; } .gallery.gallery-columns-2 .gallery-item { width: 50%; margin: 0; } .gallery.gallery-columns-3 { margin-bottom: 20px; } .gallery.gallery-columns-3 .gallery-item { width: 33%; margin: 0; } .gallery.gallery-columns-4 { margin-bottom: 20px; } .gallery.gallery-columns-4 .gallery-item { width: 25%; margin: 0; } .gallery.gallery-columns-5 { margin-bottom: 20px; } .gallery.gallery-columns-5 .gallery-item { width: 20%; margin: 0; } .gallery.gallery-columns-6 { margin-bottom: 20px; } .gallery.gallery-columns-6 .gallery-item { width: 16%; margin: 0; } .gallery br + br { display: none; } .gallery .gallery-caption { display: block; float: left; position: relative; width: auto; height: 100%; background-color: #444444; padding: 0 20px; margin: -40px 0 0 0; min-height: 40px; color: white; font-size: 14px; text-align: center; line-height: 40px; } /* ======================================================================================= Lists ======================================================================================= */ #content .tva-content ul { list-style-type: disc; list-style-position: inside; } /* ======================================================================================= Widgets ======================================================================================= */ aside.widget_search .search-form { display: block; float: left; position: relative; width: 100%; } aside.widget_search .search-form .screen-reader-text { display: none; } aside.widget_search .search-form input[type="submit"] { display: none; } aside.widget_latest_tweets_widget .latest-tweets ul li { margin-bottom: 20px; } aside.widget_latest_tweets_widget .latest-tweets ul li .tweet-text { margin-bottom: 10px; } aside.widget_latest_tweets_widget .latest-tweets ul li .tweet-details { margin-bottom: 0; } aside.widget_recent_entries ul li .post-date { display: block; margin-bottom: 5px; } aside.widget_calendar #calendar_wrap { display: block; float: left; position: relative; width: 100%; } aside.widget_calendar #calendar_wrap #wp-calendar { position: relative; width: 100%; font-size: 12px; text-align: center; border-collapse: seperate; border-spacing: 2px; } aside.widget_calendar #calendar_wrap #wp-calendar td, aside.widget_calendar #calendar_wrap #wp-calendar th { border: 1px solid #f7493c; padding: 5px; } aside.widget_calendar #calendar_wrap #wp-calendar caption { position: relative; width: 100%; background-color: #f7493c; padding: 10px 5px; color: white; font-size: 12px; font-weight: 400; text-transform: uppercase; } aside.widget_calendar #calendar_wrap #wp-calendar thead { width: 100%; font-size: 12px; text-align: center; } aside.widget_calendar #calendar_wrap #wp-calendar tbody { position: relative; width: 100%; } aside.widget_calendar #calendar_wrap #wp-calendar tbody tr { cellpadding: 5px; } aside.widget_calendar #calendar_wrap #wp-calendar tfoot { position: relative; width: 100%; } /* =============================================================================================================================================================================== 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; } /* FlexSlider Necessary Styles *********************************/ html[xmlns] .slides { display: block; } .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } * 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; } /* FlexSlider Default Theme *********************************/ .flexslider { zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } /* FlexSlider Custom *********************************/ .flexslider { margin-bottom: 20px; overflow: hidden; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides li { float: left; position: relative; width: 100%; } .flexslider .slides li .flex-caption { display: block; float: left; position: relative; width: auto; height: 100%; background-color: #444444; padding: 0 20px; margin: -40px 0 0 0; min-height: 40px; color: white; font-size: 14px; text-align: center; line-height: 40px; } .flexslider ul.flex-direction-nav { display: block; position: absolute; width: 100%; height: 40px; margin: -20px 0 0 0; top: 50%; left: 0; right: 0; z-index: 999; } .flexslider ul.flex-direction-nav a { position: absolute; width: 40px; height: 40px; background-color: #222222; } .flexslider ul.flex-direction-nav a.flex-prev { left: 0; } .flexslider ul.flex-direction-nav a.flex-prev:before { content: "\f060"; position: absolute; width: 40px; height: 40px; top: 0; left: 0; right: 0; bottom: 0; color: white; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; line-height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .flexslider ul.flex-direction-nav a.flex-next { right: 0; } .flexslider ul.flex-direction-nav a.flex-next:before { content: "\f061"; position: absolute; width: 40px; height: 40px; top: 0; left: 0; right: 0; bottom: 0; color: white; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; line-height: 40px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =============================================================================================================================================================================== View =============================================================================================================================================================================== */ .viewer li { -webkit-transition: width 500ms cubic-bezier(0.075, 0.82, 0.165, 1); -moz-transition: width 500ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: width 500ms cubic-bezier(0.075, 0.82, 0.165, 1); } .viewer .caption { visibility: hidden; opacity: 0; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; } .viewer .caption .caption { visibility: visible; opacity: 100; } /* =============================================================================================================================================================================== Off Canvas element =============================================================================================================================================================================== */ .tva-offcanvas { position: fixed; width: 302px; height: 100%; background-color: #111111; top: 0; z-index: 99999; overflow: auto; -webkit-overflow-scrolling: touch; } .tva-offcanvas.tva-offcanvas-position { right: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .tva-offcanvas.tva-offcanvas-open { right: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #tva-container { height: 100%; height: 100%; overflow-x: hidden; } #tva-container.container-push, #tva-container.push-push { -webkit-transform: translate3d(-302px, 0, 0); -moz-transform: translate3d(-302px, 0, 0); -ms-transform: translate3d(-302px, 0, 0); -o-transform: translate3d(-302px, 0, 0); transform: translate3d(-302px, 0, 0); } .tva-offcanvas, #tva-container, .push { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; -moz-transition-property: -moz-transform; -moz-transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-property: -o-transform; -o-transition-duration: 0.3s; -o-transition-timing-function: ease-in-out; -ms-transition-property: -ms-transform; -ms-transition-duration: 0.3s; -ms-transition-timing-function: ease-in-out; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease-in-out; -webkit-backface-visibility: hidden; } #tva-site-overlay { position: fixed; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tva-offcanvas-active #tva-site-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; cursor: e-resize; opacity: 1; } /* =============================================================================================================================================================================== Mediaelement =============================================================================================================================================================================== */ .mejs-container { display: block; float: left; position: relative; width: 100%; background-color: transparent; font-size: 100%; text-decoration: none; border: none; vertical-align: baseline; outline: none; } .mejs-container .mejs-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .mejs-container .mejs-inner .mejs-mediaelement { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .mejs-container .mejs-inner .mejs-mediaelement video { width: 100%; height: 100%; } .mejs-container .mejs-inner .mejs-layers .mejs-layer { position: absolute; width: 100%; top: 0; left: 0; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-poster { position: absolute; width: 100%; background-repeat: no-repeat; background-position: top center; top: 0; left: 0; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-poster img { display: none !important; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-overlay.mejs-overlay-play { cursor: pointer; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-overlay.mejs-overlay-play .mejs-overlay-button { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px !important; top: 50%; left: 50%; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-overlay.mejs-overlay-play .mejs-overlay-button:before { content: "\f01d"; position: absolute; width: 80px; height: 80px; margin: 0; top: 0; left: 0; right: 0; bottom: 0; color: white; font-family: FontAwesome; font-size: 80px; font-weight: normal; font-style: normal; text-decoration: none; text-align: center; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mejs-container .mejs-inner .mejs-layers .mejs-layer.mejs-overlay .mejs-overlay-loading { position: absolute; width: 40px; height: 40px; background-color: white; background-image: url(images/ajax-loader.gif); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin-top: -20px; margin-left: -20px; top: 50%; left: 50%; z-index: 999; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .mejs-container .mejs-inner .mejs-controls { position: absolute; width: 100%; height: 30px; background-color: #111111; padding: 0; margin: 0; left: 0; bottom: 0; } .mejs-container .mejs-inner .mejs-controls .mejs-button { display: block; float: left; position: relative; width: 30px; height: 30px; padding: 0; margin: 0; border: none; } .mejs-container .mejs-inner .mejs-controls .mejs-button button { position: absolute; width: 100%; height: 100%; background-color: transparent; padding: 0; margin: 0; border: none; outline: none; cursor: pointer; } .mejs-container .mejs-inner .mejs-controls .mejs-button button:before { content: "\f01d"; position: absolute; width: 30px; height: 30px; margin: 0; top: 0; left: 0; right: 0; bottom: 0; color: white; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; text-align: center; line-height: 30px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-playpause-button.mejs-play button:before { content: "\f04b"; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-playpause-button.mejs-pause button:before { content: "\f04c"; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button.mejs-mute button:before { content: "\f028"; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button.mejs-unmute button:before { content: "\f026"; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider { display: none; position: absolute; width: 30px; height: 100px; background-color: rgba(17, 17, 17, 0.9); margin: 0; top: -100px; left: 0; z-index: 1; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider .mejs-volume-total { position: absolute; width: 6px; height: 76px; background-color: #2b2b2b; padding: 0; margin: 0; left: 12px; top: 12px; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider .mejs-volume-current { position: absolute; width: 6px; height: 76px; background-color: #f7493c; padding: 0; margin: 0; left: 12px; top: 12px; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider .mejs-volume-handle { display: none; } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-fullscreen-button { border-left: 1px solid rgba(255, 255, 255, 0.1); } .mejs-container .mejs-inner .mejs-controls .mejs-button.mejs-fullscreen-button button:before { content: "\f0b2"; } .mejs-container .mejs-inner .mejs-controls .mejs-time { display: block; float: left; position: relative; width: 60px; height: 30px; padding: 0; margin: 0; } .mejs-container .mejs-inner .mejs-controls .mejs-time span { display: block; } .mejs-container .mejs-inner .mejs-controls .mejs-time span.mejs-currenttime, .mejs-container .mejs-inner .mejs-controls .mejs-time span.mejs-duration { color: white; font-size: 12px; text-align: center; line-height: 30px; } .mejs-container .mejs-inner .mejs-controls .mejs-time span.mejs-currenttime { border-left: 1px solid rgba(255, 255, 255, 0.1); } .mejs-container .mejs-inner .mejs-controls .mejs-time span.mejs-duration { border-right: 1px solid rgba(255, 255, 255, 0.1); } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail { display: block; float: left; position: relative; height: 30px; padding: 12px 10px 12px 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total { display: block; position: relative; height: 6px; background-color: #2b2b2b; cursor: pointer; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-buffering, .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-loaded, .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-current { display: block; position: absolute; height: 6px; top: 0; left: 0; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-buffering { background-color: #444444; z-index: 1; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-loaded { background-color: #5e5e5e; z-index: 2; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-current { background-color: #f7493c; z-index: 3; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-handle { display: none; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float { display: none; position: absolute; width: 50px; height: 30px; background-color: white; padding: 0; margin: 0 0 0 -25px; top: -42px; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float .mejs-time-float-current { display: block; float: left; width: 100%; height: 100%; padding: 0; margin: 0; font-size: 12px; text-align: center; line-height: 30px; } .mejs-container .mejs-inner .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float .mejs-time-float-corner { display: block; position: absolute; width: 0; height: 0; margin: 0 0 0 -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 4px solid white; top: 30px; left: 50%; } .mejs-container .mejs-inner .mejs-controls .mejs-horizontal-volume-slider { display: block; float: left; position: relative; width: 80px; height: 30px; padding: 12px 10px 12px 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); } .mejs-container .mejs-inner .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { display: block; position: relative; height: 6px; background-color: #2b2b2b; cursor: pointer; } .mejs-container .mejs-inner .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; height: 6px; background-color: #f7493c; top: 12px; left: 10px; cursor: pointer; } .mejs-container .mejs-inner .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { display: none; } .me-plugin { position: absolute; } .mejs-embed, .mejs-embed body { width: 100%; height: 100%; margin: 0; padding: 0; background: #000; overflow: hidden; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video { width: 100%; height: 100%; } .mejs-background { position: absolute; top: 0; left: 0; } /* =============================================================================================================================================================================== Isotope =============================================================================================================================================================================== */ /**** 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: width; -moz-transition-property: width; -ms-transition-property: width; -o-transition-property: width; transition-property: 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: -o-transform, 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; } /* End: Recommended Isotope styles */ /* 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; } /* =============================================================================================================================================================================== Grid =============================================================================================================================================================================== */ /* ======================================================================================= Columns ======================================================================================= */ .columns { display: block; float: left; position: relative; padding: 0 15px; } .columns.collapse { padding-left: 0; padding-right: 0; } .columns.centered { float: none; margin-left: auto; margin-right: auto; *zoom: 1; } .columns.centered:before, .columns.centered:after { content: ""; display: table; } .columns.centered:after { clear: both; } [class*="columns"] + [class*="columns"].end { float: left; } [class*="columns"] + [class*="columns"].none { float: none; } /* ======================================================================================= Row ======================================================================================= */ .row { width: 100%; max-width: 1008px; min-width: 727px; margin: 0 auto; } .row.non-centered { margin: 0; } .wrap, .row { *zoom: 1; } .wrap .columns.one, .row .columns.one { width: 84px; } .wrap .columns.two, .row .columns.two { width: 168px; } .wrap .columns.three, .row .columns.three { width: 252px; } .wrap .columns.four, .row .columns.four { width: 336px; } .wrap .columns.five, .row .columns.five { width: 420px; } .wrap .columns.six, .row .columns.six { width: 504px; } .wrap .columns.seven, .row .columns.seven { width: 588px; } .wrap .columns.eight, .row .columns.eight { width: 672px; } .wrap .columns.nine, .row .columns.nine { width: 756px; } .wrap .columns.ten, .row .columns.ten { width: 840px; } .wrap .columns.eleven, .row .columns.eleven { width: 924px; } .wrap .columns.twelve, .row .columns.twelve { width: 1008px; } .wrap .columns.full, .row .columns.full { width: 100%; } .wrap .columns.offset-by-one, .row .columns.offset-by-one { margin-left: 84px; } .wrap .columns.offset-by-two, .row .columns.offset-by-two { margin-left: 168px; } .wrap .columns.offset-by-three, .row .columns.offset-by-three { margin-left: 252px; } .wrap .columns.offset-by-four, .row .columns.offset-by-four { margin-left: 336px; } .wrap .columns.offset-by-five, .row .columns.offset-by-five { margin-left: 420px; } .wrap .columns.offset-by-six, .row .columns.offset-by-six { margin-left: 504px; } .wrap .columns.offset-by-seven, .row .columns.offset-by-seven { margin-left: 588px; } .wrap .columns.offset-by-eight, .row .columns.offset-by-eight { margin-left: 672px; } .wrap .columns.offset-by-nine, .row .columns.offset-by-nine { margin-left: 756px; } .wrap .columns.offset-by-ten, .row .columns.offset-by-ten { margin-left: 840px; } .wrap .columns.offset-by-eleven, .row .columns.offset-by-eleven { margin-left: 924px; } .wrap .columns.push-one, .row .columns.push-one { left: 84px; right: auto; } .wrap .columns.pull-one, .row .columns.pull-one { right: 84px; left: auto; } .wrap .columns.push-two, .row .columns.push-two { left: 168px; right: auto; } .wrap .columns.pull-two, .row .columns.pull-two { right: 168px; left: auto; } .wrap .columns.push-three, .row .columns.push-three { left: 252px; right: auto; } .wrap .columns.pull-three, .row .columns.pull-three { right: 252px; left: auto; } .wrap .columns.push-four, .row .columns.push-four { left: 336px; right: auto; } .wrap .columns.pull-four, .row .columns.pull-four { right: 336px; left: auto; } .wrap .columns.push-five, .row .columns.push-five { left: 420px; right: auto; } .wrap .columns.pull-five, .row .columns.pull-five { right: 420px; left: auto; } .wrap .columns.push-six, .row .columns.push-six { left: 504px; right: auto; } .wrap .columns.pull-six, .row .columns.pull-six { right: 504px; left: auto; } .wrap .columns.push-seven, .row .columns.push-seven { left: 588px; right: auto; } .wrap .columns.pull-seven, .row .columns.pull-seven { right: 588px; left: auto; } .wrap .columns.push-eight, .row .columns.push-eight { left: 672px; right: auto; } .wrap .columns.pull-eight, .row .columns.pull-eight { right: 672px; left: auto; } .wrap .columns.push-nine, .row .columns.push-nine { left: 756px; right: auto; } .wrap .columns.pull-nine, .row .columns.pull-nine { right: 756px; left: auto; } .wrap .columns.push-ten, .row .columns.push-ten { left: 840px; right: auto; } .wrap .columns.pull-ten, .row .columns.pull-ten { right: 840px; left: auto; } .wrap .columns.push-eleven, .row .columns.push-eleven { left: 924px; right: auto; } .wrap .columns.pull-eleven, .row .columns.pull-eleven { right: 924px; left: auto; } .wrap:before, .wrap:after, .row:before, .row:after { content: ""; display: table; } .wrap:after, .row:after { clear: both; } /* ======================================================================================= Block Grid ======================================================================================= */ .block-grid { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } .block-grid > li { display: block; float: left; position: relative; height: auto; padding: 0 15px 0 15px; } .block-grid.two-up > li { width: 504px; } .block-grid.three-up > li { width: 336px; } .block-grid.four-up > li { width: 252px; } .block-grid.six-up > li { width: 168px; } /* =============================================================================================================================================================================== Wraps =============================================================================================================================================================================== */ #header-wrap { display: block; float: left; position: relative; min-height: 100px; width: 100%; height: 100px; background-color: white; z-index: 999; } #page-header-wrap { display: block; float: left; position: relative; width: 100%; background-color: transparent; padding: 100px 0; } #content-wrap { display: block; float: left; position: relative; width: 100%; background-color: white; padding: 40px 0 100px 0; } #page-navigation-wrap { display: block; float: left; position: relative; width: 100%; background-color: transparent; padding: 60px 0; } #footer-wrap { display: block; float: left; position: relative; width: 100%; background-color: white; padding: 80px 0; } /* =============================================================================================================================================================================== Common =============================================================================================================================================================================== */ /* ======================================================================================= Post/portfolio format ======================================================================================= */ .tva-format { display: block; float: left; position: relative; width: 100%; margin: 0 0 40px 0; } /* ======================================================================================= Entry format ======================================================================================= */ .entry-format { display: block; float: left; position: relative; width: 100%; } .entry-format .post-thumbnail { display: block; float: left; position: relative; width: 100%; background-color: #f7493c; } .entry-format .post-thumbnail img { width: 100% !important; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .entry-format .post-thumbnail .alignleft, .entry-format .post-thumbnail .aligncenter, .entry-format .post-thumbnail .alignright, .entry-format .post-thumbnail p { margin-bottom: 0; } .entry-format .post-thumbnail:hover img { -webkit-opacity: 0.1; -moz-opacity: 0.1; -o-opacity: 0.1; -khtml-opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); opacity: 0.1; } .entry-format .image-caption { display: block; float: left; position: relative; width: auto; height: 100%; background-color: #444444; padding: 0 20px; margin: -40px 0 0 0; min-height: 40px; color: white; font-size: 14px; text-align: center; line-height: 40px; } /* ======================================================================================= Entry header ======================================================================================= */ .entry-header { display: block; float: left; position: relative; width: 100%; margin: 0 0 60px 0; } /* ======================================================================================= Entry meta ======================================================================================= */ .entry-meta { display: block; float: left; position: relative; width: 100%; margin: 0 0 10px 0; } /* ======================================================================================= TVA meta ======================================================================================= */ .tva-meta { color: #444444; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; } .tva-meta a { color: #888888; } .tva-meta a:hover { color: #f7493c; } /* ======================================================================================= Entry content & Entry summary ======================================================================================= */ .entry-summary, .entry-content { display: block; float: left; position: relative; width: 100%; text-align: justify; } /* ======================================================================================= Entry footer ======================================================================================= */ .entry-footer { display: block; float: left; position: relative; width: 100%; } /* ======================================================================================= Searchform ======================================================================================= */ #searchform input[type="submit"] { display: none; } /* ======================================================================================= Loading ======================================================================================= */ #tva-loading { position: absolute; width: 20px; height: 20px; background-color: white; background-image: url(images/ajax-loader.gif); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; top: 20px; right: 20px; z-index: 999; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } /* =============================================================================================================================================================================== Sidebar =============================================================================================================================================================================== */ #tva-sidebar #sidebar-search { display: table; width: 100%; height: 100px; background-color: #f7493c; padding: 0 30px; } #tva-sidebar #sidebar-search > .search-form { display: table-cell; vertical-align: middle; } #tva-sidebar #sidebar-search .search-form { position: relative; width: 100%; } #tva-sidebar #sidebar-search .search-form .screen-reader-text { display: none; } #tva-sidebar #sidebar-search .search-form input[type="submit"] { display: none; } #tva-sidebar #sidebar-search.dark .search-form input[type="search"] { border: none; } #tva-sidebar #sidebar-navigation { display: none; float: left; position: relative; width: 100%; } #tva-sidebar #sidebar-navigation ul { display: block; float: left; position: relative; width: 100%; padding: 20px 20px 0 20px; margin: 0; } #tva-sidebar #sidebar-navigation ul li { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } #tva-sidebar #sidebar-navigation ul li a { display: block; float: left; position: relative; width: 100%; padding: 5px 0; margin: 0; } #tva-sidebar #sidebar-navigation ul { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; } #tva-sidebar #sidebar-navigation ul li a { color: #888888; } #tva-sidebar #sidebar-navigation ul li a:hover { color: white; } #tva-sidebar #sidebar-navigation ul li.current-menu-item > a, #tva-sidebar #sidebar-navigation ul li.current-page-item > a { color: white; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children:hover > a { color: white; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu { display: none; float: left; position: relative; width: 100%; padding: 0; margin: 0; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li a { display: block; float: left; position: relative; width: 100%; padding: 11px 0 0 5px; margin: 0; line-height: 1.3em; } #tva-sidebar #sidebar-navigation .sub-menu-visible ul li.menu-item-has-children ul { display: block !important; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu { font-size: 14px; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li a { color: #888888; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li a:hover { color: #FFF; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li.current-menu-item > a, #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li.current-page-item > a { color: #FFF; cursor: default; } #tva-sidebar #sidebar-navigation ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover > a { color: #FFF; } #tva-sidebar #sidebar-navigation.visible { display: block; } #tva-sidebar #sidebar-widgets { display: block; float: left; position: relative; width: 100%; padding: 20px; } #tva-sidebar #sidebar-widgets aside { display: block; float: left; position: relative; width: 100%; margin: 0 0 20px 0; color: #666666; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 14px; } #tva-sidebar #sidebar-widgets aside a { color: #aaaaaa; } #tva-sidebar #sidebar-widgets aside a:hover { color: white; } #tva-sidebar #sidebar-widgets aside .widget-title { color: white; font-family: "Maven Pro", Helvetica, Arial, sans-serif; } #tva-sidebar #sidebar-widgets aside.widget_nav_menu { display: block; float: left; position: relative; width: 100%; } #tva-sidebar #sidebar-widgets aside.widget_nav_menu ul { display: block; float: left; position: relative; width: 100%; padding: 0; } #tva-sidebar #sidebar-widgets aside.widget_nav_menu ul li { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } #tva-sidebar #sidebar-widgets aside.widget_nav_menu ul li a { display: block; float: left; position: relative; width: auto; padding: 0; margin: 0; } #tva-sidebar #sidebar-widgets aside .tva-meta { color: #444444; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 14px; } #tva-sidebar #sidebar-widgets aside .tva-meta a { color: #666666; } #tva-sidebar #sidebar-widgets aside .tva-meta a:hover { color: #888888; } /* =============================================================================================================================================================================== Header =============================================================================================================================================================================== */ #header { position: relative; height: 100%; } #header > div { position: relative; height: 100%; } #header #tva-logo { display: table; float: left; height: 100%; } #header #tva-logo > #site-logo, #header #tva-logo #site-title { display: table-cell; vertical-align: middle; } #header #tva-logo #site-logo img { display: block; width: auto; height: auto; } #header #tva-logo #site-title { font-size: 28px; } #header #tva-tagline { display: table; float: left; position: relative; height: 100%; margin: 0 0 0 20px; } #header #tva-tagline > #tagline { display: table-cell; vertical-align: middle; padding-top: 10px;} #header #tva-tagline #tagline { color: #888888; } #header #navigation { float: right; position: relative; height: 100%; padding: 0; margin: 0; display: table; } #header #navigation > .tva-menu-navigation-container, #header #navigation .sidebar-trigger { display: table-cell; vertical-align: middle; } #header #navigation .tva-menu-navigation-container { position: relative; height: 100%; } #header #navigation .tva-menu-navigation-container ul { padding: 0; margin: 0; } #header #navigation .tva-menu-navigation-container ul li { display: block; float: left; position: relative; width: auto; padding: 0; margin: 0 15px; } #header #navigation .tva-menu-navigation-container ul li:first-child { margin-left: 0 15px 0 0; } #header #navigation .tva-menu-navigation-container ul li:last-child { margin-right: 0 0 0 15px; } #header #navigation .tva-menu-navigation-container ul li a { display: block; float: left; position: relative; padding: 20px 0; } #header #navigation .tva-menu-navigation-container ul { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; } #header #navigation .tva-menu-navigation-container ul li a { color: #888888; } #header #navigation .tva-menu-navigation-container ul li a:hover { color: #222222; } #header #navigation .tva-menu-navigation-container ul li.current-menu-item > a, #header #navigation .tva-menu-navigation-container ul li.current-page-item > a { color: #222222; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children:hover > a { color: #222222; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children > a:after { content: "\f078"; position: relative; width: 32px; height: 32px; margin: 0 0 0 5px; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu { display: none; float: none; position: absolute; width: 222px; padding: 0; margin: 0; top: 60px; left: 0; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li a { display: block; float: left; position: relative; width: 100%; padding: 15px; margin: 0 0 2px 0; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li:first-child:before { content: ""; position: absolute; width: 0; height: 0; border-left-width: 10px; border-left-style: solid; border-right-width: 10px; border-right-style: solid; border-bottom-width: 6px; border-bottom-style: solid; margin: 0; top: -6px; left: 20px; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a:after { content: "\f054"; position: relative; width: 32px; height: 32px; margin: 0 0 0 5px; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: inherit; text-align: center; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu { top: auto; left: 224px; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li:first-child:before { display: none; } #header #navigation .tva-menu-navigation-container .sub-menu-visible ul li.menu-item-has-children ul { display: block !important; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu { font-family: inherit; font-size: 14px; font-weight: inherit; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li a { color: #888888; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li a:hover { color: white; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.current-menu-item > a, #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.current-page-item > a { color: white; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover > a { color: white; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li:first-child:before { border-left-color: transparent; border-right-color: transparent; border-bottom-color: #222222; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #header #navigation .tva-menu-navigation-container ul li.menu-item-has-children ul.sub-menu li:first-child:hover:before { border-left-color: transparent; border-right-color: transparent; border-bottom-color: #222222; } #header #navigation .sidebar-trigger { display: none; } #header #navigation .sidebar-trigger a { display: block; float: left; position: relative; width: 24px; height: 20px; margin: 0 0 0 20px; } #header #navigation .sidebar-trigger a .layer { display: block; position: absolute; width: 100%; height: 4px; background-color: #222222; left: 0; right: 0; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #header #navigation .sidebar-trigger a .layer.bun-1 { top: 0; } #header #navigation .sidebar-trigger a .layer.burger { top: 8px; } #header #navigation .sidebar-trigger a .layer.bun-2 { top: 16px; } #header #navigation.nav-and-trigger .tva-menu-navigation-container { display: table-cell; } #header #navigation.nav-and-trigger .sidebar-trigger { display: table-cell; } #header #navigation.nav-only .tva-menu-navigation-container { display: table-cell; } #header #navigation.nav-only .sidebar-trigger { display: none; } #header #navigation.trigger-only .tva-menu-navigation-container { display: none; } #header #navigation.trigger-only .sidebar-trigger { display: table-cell; } /* =============================================================================================================================================================================== Intro =============================================================================================================================================================================== */ #intro { margin-bottom: 100px; } /* =============================================================================================================================================================================== Filter =============================================================================================================================================================================== */ #filter ul { display: block; float: left; position: relative; margin: 0 0 40px 0; } #filter ul li { display: block; float: left; position: relative; margin: 0 0 0 20px; } #filter ul li:first-child { margin-left: 0; } #filter ul { font-family: "Roboto", Helvetica, Arial, sans-serif; } #filter ul li a { color: #aaaaaa; } #filter ul li a:hover { color: #f7493c; } #filter ul li a:focus { color: false false; } #filter ul li.current-menu-item > a, #filter ul li.current-page-item > a { color: #f7493c; } #filter ul li.menu-item-has-children:hover > a { color: #f7493c; } #filter li a.selected { color: #f7493c; } /* =============================================================================================================================================================================== Intro =============================================================================================================================================================================== */ #page-header .entry-header { margin: 0; } /* =============================================================================================================================================================================== Content =============================================================================================================================================================================== */ #content .hentry .entry-header .entry-title { color: #222222; font-size: 28px; } #content .hentry .entry-header .entry-title a { color: #222222; } #content .hentry .entry-header .entry-title a:hover { color: #f7493c; } /* =============================================================================================================================================================================== Content > Portfolio > Grid =============================================================================================================================================================================== */ #content.portfolio-grid { margin-bottom: -30px; } #content.portfolio-grid .hentry { margin-bottom: 30px; -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } #content.portfolio-grid .hentry a.post-thumbnail { display: block; float: left; position: relative; width: 100%; height: 100%; /*background-color: #f7493c;*/ background:none; } #content.portfolio-grid .hentry a.post-thumbnail img { -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; -khtml-opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #content.portfolio-grid .hentry a.post-thumbnail .tva-overlay { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; z-index: 9999; -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #content.portfolio-grid .hentry a.post-thumbnail .tva-overlay .entry-title { color: white; padding: 20px 40px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #content.portfolio-grid .hentry a.post-thumbnail:hover img {/* -webkit-opacity: 0.1; -moz-opacity: 0.1; -o-opacity: 0.1; -khtml-opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); opacity: 0.1; */ } #content.portfolio-grid .hentry a.post-thumbnail:hover .tva-overlay {/* -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; -khtml-opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; */} /* =============================================================================================================================================================================== Content > Blog =============================================================================================================================================================================== */ #content.blog .hentry { display: block; float: left; position: relative; width: 100%; padding: 120px 0 0 0; margin: 80px 0 0 0; border-top: 1px solid #dddddd; } #content.blog .hentry:first-child { border-top: none; padding-top: 0; margin-top: 0; } #content.blog .hentry .tva-content .post-details .entry-meta ul { display: block; float: left; position: relative; width: 100%; } #content.blog .hentry .tva-content .post-details .entry-meta ul li.tags a:before { content: "#"; } #content.blog .hentry.format-aside .entry-format { background-color: white; text-align: center; padding: 60px; } #content.blog .hentry.format-aside .entry-format p:last-child { margin-bottom: 0; } #content.blog .hentry.format-link .entry-format { text-align: center; } #content.blog .hentry.format-link .entry-format .entry-title { font-weight: 700; } #content.blog .hentry.format-quote .entry-format { text-align: center; } #content.blog .hentry.format-status .entry-format { background-color: white; text-align: center; padding: 60px; } #content.blog .hentry.format-video .entry-format iframe { width: 100%; } #content.blog .hentry.format-audio .entry-format iframe { width: 100%; } #content.blog .hentry.format-chat .entry-format { background-color: white; text-align: center; padding: 60px; } #content.blog .hentry.format-chat .entry-format ul li { padding: 10px; } #content.blog .hentry.format-chat .entry-format ul li:nth-child(odd) { background: #f2f2f2; } #content.blog .hentry.sticky .tva-content .post-content .entry-header .entry-title a { position: relative; } #content.blog .hentry.sticky .tva-content .post-content .entry-header .entry-title a:after { content: "\f08d"; position: absolute; width: 28px; height: 28px; margin: -14px 0 0 0; top: 50%; right: -28px; font-family: FontAwesome; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; text-align: center; line-height: 28px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =============================================================================================================================================================================== Content > Single =============================================================================================================================================================================== */ #content.portfolio.single .hentry .tva-content { margin-bottom: 80px; } #content.portfolio.single .hentry .tva-format .tva-meta ul { display: block; float: left; width: 100%; list-style-type: disc; list-style-position: inside; } #content.portfolio.single .hentry .tva-format .tva-meta ul li { display: block; float: left; width: 100%; } /* =============================================================================================================================================================================== Content > Single =============================================================================================================================================================================== */ #content.blog.single .hentry { display: block; float: left; position: relative; width: 100%; padding: 0 0 80px 0; margin: 0 0 120px 0; border-bottom: 1px solid #dddddd; } /* =============================================================================================================================================================================== Content > Page =============================================================================================================================================================================== */ #content.page .hentry { display: block; float: left; position: relative; width: 100%; margin: 0; } /* =============================================================================================================================================================================== Content > Search =============================================================================================================================================================================== */ #content.search .hentry { display: block; float: left; position: relative; width: 100%; padding: 40px 0 0 0; margin: 40px 0 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } #content.search .hentry:first-child { border-top: none; padding-top: 0; margin-top: 0; } #content.search .hentry .tva-content .entry-header .entry-meta { color: #f7493c; } #content.search .hentry .tva-content .entry-summary .highlight-term { font-weight: 700; } /* =============================================================================================================================================================================== Content > Contact =============================================================================================================================================================================== */ #content .wpcf7 { display: block; float: left; position: relative; width: 100%; margin: 20px 0 0 0; } #content .wpcf7 p { display: block; float: left; width: 100%; } #content .wpcf7 p .wpcf7-form-control-wrap { display: block; float: left; width: 100%; } #content .wpcf7 p .wpcf7-form-control-wrap .wpcf7-not-valid-tip { width: 100%; height: 100%; font-size: inherit; line-height: 1.6; padding: 5px 0; top: 0; left: 0; } #content .wpcf7 p .ajax-loader { float: right; width: auto; height: auto; } #content .wpcf7 label .required { color: #f7493c; } #content .wpcf7 .wpcf7-validation-errors { display: block; float: left; width: 100%; border-color: red; margin: 0; display: block; float: left; position: relative; width: 100%; background-color: red; padding: 10px; margin: 0 0 20px 0; color: white; font-weight: 700; } /* =============================================================================================================================================================================== Comments =============================================================================================================================================================================== */ #comments { display: block; float: left; position: relative; width: 100%; margin: 0 0 100px 0; } #comments .comments-title { margin: 0 0 20px 0; } #comments .comment-list { display: block; float: left; position: relative; width: 100%; } #comments .comment-list .comment { display: block; float: left; position: relative; width: 100%; padding: 0 0 10px 84px; margin: 0 0 40px 0; } #comments .comment-list .comment .comment-meta { margin-bottom: 10px; } #comments .comment-list .comment .comment-meta .tva-meta .comment-avatar { display: block; position: absolute; width: 54px; height: 54px; left: 0; } #comments .comment-list .comment .comment-meta .comment-reply-link { text-transform: uppercase; margin-left: 10px; } #comments .comment-list .comment:before { content: ""; position: absolute; width: 54px; height: 0; border-bottom: 1px solid #dddddd; left: 0; bottom: 0; } #comments .comment-list .comment.bypostauthor:before { content: ""; position: absolute; width: 54px; height: 0; border-bottom: 1px solid #f7493c; left: 0; bottom: 0; } /* =============================================================================================================================================================================== Respond =============================================================================================================================================================================== */ #respond { display: block; float: left; position: relative; width: 100%; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { display: block; float: left; position: relative; width: 100%; } /* =============================================================================================================================================================================== Pagination =============================================================================================================================================================================== */ #page-navigation { color: #888888; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; } #page-navigation a { color: #444444; } #page-navigation a:hover { color: #f7493c; } #page-navigation.paging-navigation .entry-header, #page-navigation.post-navigation .entry-header { text-align: center; } #page-navigation.paging-navigation .nav-links ul, #page-navigation.post-navigation .nav-links ul { display: block; float: left; position: relative; width: 100%; margin: 0; } #page-navigation.paging-navigation .nav-links ul li, #page-navigation.post-navigation .nav-links ul li { display: block; position: relative; } #page-navigation.paging-navigation .nav-links ul li.nav-previous, #page-navigation.post-navigation .nav-links ul li.nav-previous { float: left; } #page-navigation.paging-navigation .nav-links ul li.nav-previous a .label, #page-navigation.post-navigation .nav-links ul li.nav-previous a .label { padding-left: 5px; } #page-navigation.paging-navigation .nav-links ul li.nav-next, #page-navigation.post-navigation .nav-links ul li.nav-next { float: right; } #page-navigation.paging-navigation .nav-links ul li.nav-next a .label, #page-navigation.post-navigation .nav-links ul li.nav-next a .label { padding-right: 5px; } #page-navigation.paging-navigation .nav-links ul li.nav-home, #page-navigation.post-navigation .nav-links ul li.nav-home { display: block; position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; top: 50%; left: 50%; } #page-navigation.paging-navigation .nav-links ul li.nav-home a, #page-navigation.post-navigation .nav-links ul li.nav-home a { display: block; float: left; position: relative; width: 100%; height: 100%; text-align: center; line-height: 30px; } #page-navigation.paging-navigation .nav-links ul li.nav-home a .meta-nav .fa, #page-navigation.post-navigation .nav-links ul li.nav-home a .meta-nav .fa { font-size: 28px !important; } #page-navigation.pagination ul { display: block; float: left; position: relative; margin: 0; } #page-navigation.pagination ul li { display: block; float: left; position: relative; margin: 0 0 0 10px; } #page-navigation.pagination ul li:first-child { margin-left: 0; } #page-navigation.pagination ul li a.next .label { margin-right: 5px; } #page-navigation.pagination ul li a.prev .label { margin-left: 5px; } /* =============================================================================================================================================================================== Subooter =============================================================================================================================================================================== */ #subfooter { color: #888888; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; } #subfooter a { color: #444444; } #subfooter a:hover { color: #f7493c; } /* =============================================================================================================================================================================== Footer =============================================================================================================================================================================== */ #footer { color: #888888; font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 16px; } #footer a { color: #444444; } #footer a:hover { color: #f7493c; } /* =============================================================================================================================================================================== Social =============================================================================================================================================================================== */ /* ======================================================================================= Normal ======================================================================================= */ ul.tva-social-links { display: block; float: left; position: relative; margin: 0 0 20px -5px; } ul.tva-social-links li { display: block; float: left; position: relative; margin: 0 0 5px 5px; } ul.tva-social-links.size-small li a { display: block; float: left; position: relative; width: 28px; height: 28px; font-size: 14px; text-align: center; line-height: 28px; } ul.tva-social-links.size-medium li a { display: block; float: left; position: relative; width: 36px; height: 36px; font-size: 18px; text-align: center; line-height: 36px; } ul.tva-social-links.size-large li a { display: block; float: left; position: relative; width: 56px; height: 56px; font-size: 28px; text-align: center; line-height: 56px; } ul.tva-social-links.style-normal li a { color: white !important; } ul.tva-social-links.style-normal li a.dribbble { background-color: #ea4c89; } ul.tva-social-links.style-normal li a.dribbble:hover { background-color: #f5a7c5; } ul.tva-social-links.style-normal li a.dropbox { background-color: #1187dd; } ul.tva-social-links.style-normal li a.dropbox:hover { background-color: #0a4d7e; } ul.tva-social-links.style-normal li a.facebook { background-color: #3b5998; } ul.tva-social-links.style-normal li a.facebook:hover { background-color: #1e2e4f; } ul.tva-social-links.style-normal li a.flickr { background-color: #ff0080; } ul.tva-social-links.style-normal li a.flickr:hover { background-color: #99004d; } ul.tva-social-links.style-normal li a.github { background-color: #171515; } ul.tva-social-links.style-normal li a.github:hover { background-color: black; } ul.tva-social-links.style-normal li a.google { background-color: #e34b39; } ul.tva-social-links.style-normal li a.google:hover { background-color: #9f2517; } ul.tva-social-links.style-normal li a.instagram { background-color: #595959; } ul.tva-social-links.style-normal li a.instagram:hover { background-color: #262626; } ul.tva-social-links.style-normal li a.linkedin { background-color: #0b84c3; } ul.tva-social-links.style-normal li a.linkedin:hover { background-color: #064362; } ul.tva-social-links.style-normal li a.mail { background-color: #444444; } ul.tva-social-links.style-normal li a.mail:hover { background-color: #f7493c; } ul.tva-social-links.style-normal li a.pinterest { background-color: #cb2027; } ul.tva-social-links.style-normal li a.pinterest:hover { background-color: #731216; } ul.tva-social-links.style-normal li a.rss { background-color: #fb7922; } ul.tva-social-links.style-normal li a.rss:hover { background-color: #b44a03; } ul.tva-social-links.style-normal li a.skype { background-color: #00aff0; } ul.tva-social-links.style-normal li a.skype:hover { background-color: #00658a; } ul.tva-social-links.style-normal li a.tumblr { background-color: #37465c; } ul.tva-social-links.style-normal li a.tumblr:hover { background-color: #11151c; } ul.tva-social-links.style-normal li a.twitter { background-color: #00acee; } ul.tva-social-links.style-normal li a.twitter:hover { background-color: #006288; } ul.tva-social-links.style-normal li a.vimeo { background-color: #52b8ea; } ul.tva-social-links.style-normal li a.vimeo:hover { background-color: #1788bf; } ul.tva-social-links.style-normal li a.youtube { background-color: #e03335; } ul.tva-social-links.style-normal li a.youtube:hover { background-color: #961718; } ul.tva-social-links.style-greyscale li a { background-color: rgba(0, 0, 0, 0.75); color: white !important; } ul.tva-social-links.style-greyscale li a:hover { background-color: #f7493c; } ul.tva-social-links.style-icon li a { background-color: transparent; } ul.tva-social-links.shape-rounded-corners li a { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } ul.tva-social-links.shape-round li a { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } /* ======================================================================================= Alter for dark background use ======================================================================================= */ .dark ul.tva-social-links.style-greyscale li a { background-color: white; color: #444444 !important; } .dark ul.tva-social-links.style-greyscale li a:hover { background-color: #f7493c; color: white !important; } /* =============================================================================================================================================================================== Buttons =============================================================================================================================================================================== */ a.button, input[type="submit"], input[type="button"] { display: inline-block; position: relative; margin: 0 0 20px 0; cursor: pointer; padding-top: 16px; padding-right: 32px; padding-bottom: 16px; padding-left: 32px; font-size: 16px; color: #666; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: #ccc 1px solid; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.button.mini, input[type="submit"].mini, input[type="button"].mini { padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 24px; font-size: 12px; } a.button.small, input[type="submit"].small, input[type="button"].small { padding-top: 14px; padding-right: 28px; padding-bottom: 14px; padding-left: 28px; font-size: 14px; } a.button.medium, input[type="submit"].medium, input[type="button"].medium { padding-top: 16px; padding-right: 32px; padding-bottom: 16px; padding-left: 32px; font-size: 16px; } a.button.big, input[type="submit"].big, input[type="button"].big { padding-top: 18px; padding-right: 36px; padding-bottom: 18px; padding-left: 36px; font-size: 18px; } a.button.large, input[type="submit"].large, input[type="button"].large { padding-top: 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; font-size: 20px; } /* =============================================================================================================================================================================== Post styles =============================================================================================================================================================================== */ /* ======================================================================================= Buttons ======================================================================================= */ .button { color: white; } .button.big { padding-top: 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; font-size: 20px; } .button.small { padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 24px; font-size: 12px; } .button.button-red { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } .button.button-yellow { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } .button.button-green { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } .button.button-blue { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } .button.button-purple { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } .button.button-orange { color: white; font-family: inherit; font-weight: 400; text-transform: uppercase; text-align: center; border: none; } /* ======================================================================================= Pull quotes ======================================================================================= */ .pullquote { width: 30%; } .pullquote.pullleft { text-align: right; border: none; border-right: 6px solid #f7493c; padding-left: 0; margin-right: 30px; } .pullquote.pullright { text-align: left; border: none; border-left: 6px solid #f7493c; padding-right: 0; margin-left: 30px; } /* ======================================================================================= Alert ======================================================================================= */ .alert { display: block; position: relative; padding: 20px; margin: 0 0 20px 0; color: white; } .alert.red { background-color: #dd574f; } .alert.yellow { background-color: #ffc63f; } .alert.green { background-color: #5db461; } .alert.blue { background-color: #2e93d0; } .alert.purple { background-color: #805fa4; } .alert.orange { background-color: #f27d38; } .alert .close { display: block; position: absolute; width: 30px; height: 30px; top: 0; right: 0; color: white; text-align: center; line-height: 30px; } /* ======================================================================================= Columns ======================================================================================= */ .tva-columns.tva-two-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .tva-columns.tva-three-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .tva-columns.tva-four-columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } /* ======================================================================================= Highlight ======================================================================================= */ .highlight { background-color: #fff3aa; color: #000; } /* =============================================================================================================================================================================== Print styles Inlined to avoid required HTTP connection: h5bp.com/r =============================================================================================================================================================================== */ @media print { * { background: transparent !important; color: black !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* =============================================================================================================================================================================== Responsive stuff =============================================================================================================================================================================== */ /* ======================================================================================= Large ======================================================================================= */ @media only screen and (min-width: 1224px) { .row { width: 100%; max-width: 1200px; min-width: 1008px; } .wrap .columns.one { width: 100px; } .wrap .columns.two { width: 200px; } .wrap .columns.three { width: 300px; } .wrap .columns.four { width: 400px; } .wrap .columns.five { width: 500px; } .wrap .columns.six { width: 600px; } .wrap .columns.seven { width: 700px; } .wrap .columns.eight { width: 800px; } .wrap .columns.nine { width: 900px; } .wrap .columns.ten { width: 1000px; } .wrap .columns.eleven { width: 1100px; } .wrap .columns.twelve { width: 1200px; } .wrap .columns.full { width: 100%; } } /* ======================================================================================= Normal ======================================================================================= */ @media only screen and (min-width: 1023px) and (max-width: 1224px) { .row { width: 100%; max-width: 1008px; min-width: 727px; } } /* ======================================================================================= Tablet ======================================================================================= */ @media only screen and (min-width: 767px) and (max-width: 1023px) { .row { width: 672px; max-width: 672px; min-width: 672px; } .wrap .columns.one { width: 100%; } .wrap .columns.two { width: 100%; } .wrap .columns.three { width: 100%; } .wrap .columns.four { width: 100%; } .wrap .columns.five { width: 100%; } .wrap .columns.six { width: 100%; } .wrap .columns.seven { width: 100%; } .wrap .columns.eight { width: 100%; } .wrap .columns.nine { width: 100%; } .wrap .columns.ten { width: 100%; } .wrap .columns.eleven { width: 100%; } .wrap .columns.twelve { width: 100%; } .wrap .columns.full { width: 100%; } .wrap .columns.offset-by-one { margin-left: 0; } .wrap .columns.offset-by-two { margin-left: 0; } .wrap .columns.offset-by-three { margin-left: 0; } .wrap .columns.offset-by-four { margin-left: 0; } .wrap .columns.offset-by-five { margin-left: 0; } .wrap .columns.offset-by-six { margin-left: 0; } .wrap .columns.offset-by-seven { margin-left: 0; } .wrap .columns.offset-by-eight { margin-left: 0; } .wrap .columns.offset-by-nine { margin-left: 0; } .wrap .columns.offset-by-ten { margin-left: 0; } .wrap .columns.offset-by-eleven { margin-left: 0; } .wrap .columns.push-one { left: 0; right: auto; } .wrap .columns.pull-one { right: 0; left: auto; } .wrap .columns.push-two { left: 0; right: auto; } .wrap .columns.pull-two { right: 0; left: auto; } .wrap .columns.push-three { left: 0; right: auto; } .wrap .columns.pull-three { right: 0; left: auto; } .wrap .columns.push-four { left: 0; right: auto; } .wrap .columns.pull-four { right: 0; left: auto; } .wrap .columns.push-five { left: 0; right: auto; } .wrap .columns.pull-five { right: 0; left: auto; } .wrap .columns.push-six { left: 0; right: auto; } .wrap .columns.pull-six { right: 0; left: auto; } .wrap .columns.push-seven { left: 0; right: auto; } .wrap .columns.pull-seven { right: 0; left: auto; } .wrap .columns.push-eight { left: 0; right: auto; } .wrap .columns.pull-eight { right: 0; left: auto; } .wrap .columns.push-nine { left: 0; right: auto; } .wrap .columns.pull-nine { right: 0; left: auto; } .wrap .columns.push-ten { left: 0; right: auto; } .wrap .columns.pull-ten { right: 0; left: auto; } .wrap .columns.push-eleven { left: 0; right: auto; } .wrap .columns.pull-eleven { right: 0; left: auto; } .wrap .grid .columns.one { width: 336px; } .wrap .grid .columns.two { width: 336px; } .wrap .grid .columns.three { width: 336px; } .wrap .grid .columns.four { width: 336px; } .wrap .grid .columns.five { width: 336px; } .wrap .grid .columns.six { width: 336px; } .wrap .grid .columns.seven { width: 336px; } .wrap .grid .columns.eight { width: 336px; } .wrap .grid .columns.nine { width: 336px; } .wrap .grid .columns.ten { width: 336px; } .wrap .grid .columns.eleven { width: 336px; } .wrap .grid .columns.twelve { width: 336px; } .wrap .grid .columns.full { width: 100%; } .block-grid { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } .block-grid > li { display: block; float: left; position: relative; height: auto; padding: 0 15px 0 15px; } .block-grid.two-up > li { width: 100%; } .block-grid.three-up > li { width: 100%; } .block-grid.four-up > li { width: 100%; } .block-grid.six-up > li { width: 100%; } /* - Hide/show - */ .hide-on-tablet { display: none !important; } .show-on-tablet { display: block !important; } /* - Navigation - */ #header #navigation.nav-and-trigger .tva-menu-navigation-container, #header #navigation.nav-only .tva-menu-navigation-container, #header #navigation.trigger-only .tva-menu-navigation-container { display: none; } #header #navigation.nav-and-trigger .sidebar-trigger, #header #navigation.nav-only .sidebar-trigger, #header #navigation.trigger-only .sidebar-trigger { display: table-cell; } /* - Sidebar navigation - */ #tva-sidebar #sidebar-navigation { display: block !important; } /* - Pagination - */ #page-navigation.paging-navigation .nav-links ul li a .label, #page-navigation.post-navigation .nav-links ul li a .label { display: none; } } /* ======================================================================================= Mobile ======================================================================================= */ @media only screen and (min-width: 0px) and (max-width: 767px) { .row { width: 300px; max-width: 300px; min-width: 300px; } .wrap .columns.one { width: 100%; } .wrap .columns.two { width: 100%; } .wrap .columns.three { width: 100%; } .wrap .columns.four { width: 100%; } .wrap .columns.five { width: 100%; } .wrap .columns.six { width: 100%; } .wrap .columns.seven { width: 100%; } .wrap .columns.eight { width: 100%; } .wrap .columns.nine { width: 100%; } .wrap .columns.ten { width: 100%; } .wrap .columns.eleven { width: 100%; } .wrap .columns.twelve { width: 100%; } .wrap .columns.full { width: 100%; } .wrap .columns.offset-by-one { margin-left: 0; } .wrap .columns.offset-by-two { margin-left: 0; } .wrap .columns.offset-by-three { margin-left: 0; } .wrap .columns.offset-by-four { margin-left: 0; } .wrap .columns.offset-by-five { margin-left: 0; } .wrap .columns.offset-by-six { margin-left: 0; } .wrap .columns.offset-by-seven { margin-left: 0; } .wrap .columns.offset-by-eight { margin-left: 0; } .wrap .columns.offset-by-nine { margin-left: 0; } .wrap .columns.offset-by-ten { margin-left: 0; } .wrap .columns.offset-by-eleven { margin-left: 0; } .wrap .columns.push-one { left: 0; right: auto; } .wrap .columns.pull-one { right: 0; left: auto; } .wrap .columns.push-two { left: 0; right: auto; } .wrap .columns.pull-two { right: 0; left: auto; } .wrap .columns.push-three { left: 0; right: auto; } .wrap .columns.pull-three { right: 0; left: auto; } .wrap .columns.push-four { left: 0; right: auto; } .wrap .columns.pull-four { right: 0; left: auto; } .wrap .columns.push-five { left: 0; right: auto; } .wrap .columns.pull-five { right: 0; left: auto; } .wrap .columns.push-six { left: 0; right: auto; } .wrap .columns.pull-six { right: 0; left: auto; } .wrap .columns.push-seven { left: 0; right: auto; } .wrap .columns.pull-seven { right: 0; left: auto; } .wrap .columns.push-eight { left: 0; right: auto; } .wrap .columns.pull-eight { right: 0; left: auto; } .wrap .columns.push-nine { left: 0; right: auto; } .wrap .columns.pull-nine { right: 0; left: auto; } .wrap .columns.push-ten { left: 0; right: auto; } .wrap .columns.pull-ten { right: 0; left: auto; } .wrap .columns.push-eleven { left: 0; right: auto; } .wrap .columns.pull-eleven { right: 0; left: auto; } .block-grid { display: block; float: left; position: relative; width: 100%; padding: 0; margin: 0; } .block-grid > li { display: block; float: left; position: relative; height: auto; padding: 0 15px 0 15px; } .block-grid.two-up > li { width: 100%; } .block-grid.three-up > li { width: 100%; } .block-grid.four-up > li { width: 100%; } .block-grid.six-up > li { width: 100%; } /* - Hide/show - */ .hide-on-mobile { display: none !important; } .show-on-mobile { display: block !important; } /* - Navigation - */ #header #navigation.nav-and-trigger .tva-menu-navigation-container, #header #navigation.nav-only .tva-menu-navigation-container, #header #navigation.trigger-only .tva-menu-navigation-container { display: none; } #header #navigation.nav-and-trigger .sidebar-trigger, #header #navigation.nav-only .sidebar-trigger, #header #navigation.trigger-only .sidebar-trigger { display: table-cell; } /* - Sidebar navigation - */ #tva-sidebar #sidebar-navigation { display: block !important; } /* - Alignment - */ .left { float: left !important; } .right { float: left !important; } .text-left { text-align: left !important; } .text-right { text-align: left !important; } .text-center { text-align: left !important; } .text-justify { text-align: left !important; } .alignleft { float: left; margin-right: 0; } .alignright { float: left; margin-left: 0; } /* - Pagination - */ #page-navigation.paging-navigation .nav-links ul li a .label, #page-navigation.post-navigation .nav-links ul li a .label { display: none; } /* - Buttons - */ a.button, input[type="submit"] { display: inline-block; position: relative; margin: 0 0 20px 0; cursor: pointer; padding-top: 16px; padding-right: 32px; padding-bottom: 16px; padding-left: 32px; font-size: 16px; width: 100%; padding-right: 0; padding-bottom: 16px; padding-left: 0; } /* - TVA columns - */ .tva-columns.tva-two-columns, .tva-columns.tva-three-columns, .tva-columns.tva-four-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } /* - Mediaelement - */ .mejs-volume-button, .mejs-horizontal-volume-slider { display: none !important; } }